Skip to content

Commit 7b9f73f

Browse files
im2nguyenim2nguyen
authored
Merge pull request #45 from hashicorp-demoapp/nginx-image
Create another docker image for NGINX
2 parents 84e6a24 + b7a22fd commit 7b9f73f

23 files changed

+282
-151
lines changed

‎.circleci/config.yml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,18 @@ jobs:
7171
name: docker buildx build and push
7272
command: |
7373
docker buildx build --platform linux/amd64,linux/arm64 \
74+
-f Dockerfile \
7475
-t hashicorpdemoapp/frontend:${CIRCLE_TAG} \
7576
--push \
7677
.
78+
- run:
79+
name: docker buildx build and push (nginx)
80+
command: |
81+
docker buildx build --platform linux/amd64,linux/arm64 \
82+
-f Dockerfile \
83+
-t hashicorpdemoapp/frontend-nginx:${CIRCLE_TAG} \
84+
--push \
85+
.
7786
7887
publish-github-release:
7988
docker:

‎Dockerfile‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ COPY . .
2020
# Learn more here: https://nextjs.org/telemetry
2121
# Uncomment the following line in case you want to disable telemetry during the build.
2222
# ENV NEXT_TELEMETRY_DISABLED 1
23+
RUN rm -r node_modules/@next/swc-linux-x64-gnu
2324
RUN NEXT_PUBLIC_PUBLIC_API_URL=APP_NEXT_PUBLIC_API_URL NEXT_PUBLIC_FOOTER_FLAG=APP_PUBLIC_FOOTER_FLAG yarn build
2425

2526
# Production image, copy all the files and run next

‎Dockerfile.nginx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Install dependencies only when needed
2+
FROM node:16-alpine AS deps
3+
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
4+
RUN apk add --no-cache libc6-compat
5+
WORKDIR /app
6+
COPY package.json yarn.lock ./
7+
RUN yarn install --frozen-lockfile
8+
9+
# If using npm with a `package-lock.json` comment out above and use below instead
10+
# COPY package.json package-lock.json ./
11+
# RUN npm ci
12+
13+
# Rebuild the source code only when needed
14+
FROM node:16-alpine AS builder
15+
WORKDIR /app
16+
COPY --from=deps /app/node_modules ./node_modules
17+
COPY . .
18+
19+
# Next.js collects completely anonymous telemetry data about general usage.
20+
# Learn more here: https://nextjs.org/telemetry
21+
# Uncomment the following line in case you want to disable telemetry during the build.
22+
# ENV NEXT_TELEMETRY_DISABLED 1
23+
RUN NEXT_PUBLIC_PUBLIC_API_URL=APP_NEXT_PUBLIC_API_URL NEXT_PUBLIC_FOOTER_FLAG=APP_PUBLIC_FOOTER_FLAG yarn export
24+
25+
# Production image, copy all the files to nginx directory
26+
FROM nginx:alpine
27+
WORKDIR /app
28+
29+
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
30+
31+
## Remove default nginx index page
32+
RUN rm -rf /usr/share/nginx/html/*
33+
34+
# Copy from the builder
35+
COPY --from=builder /app/out /usr/share/nginx/html
36+
COPY --from=builder /app/entrypoint-nginx.sh ./entrypoint-nginx.sh
37+
38+
EXPOSE 3000 80
39+
40+
ENTRYPOINT ["/app/entrypoint-nginx.sh"]
41+
42+
CMD ["nginx", "-g", "daemon off;"]

‎Makefile‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
VERSION=v1.0.5
1+
VERSION=v1.0.6
22
REPOSITORY=hashicorpdemoapp/frontend
33

44
build_docker:

‎README.md‎

Lines changed: 12 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,29 @@
1-
# frontend
2-
React UI that interacts with GraphQL public api
1+
# HashiCups Frontend
2+
3+
React UI that interacts with GraphQL `public-api`.
34

45
[![CircleCI](https://circleci.com/gh/hashicorp-demoapp/frontend.svg?style=svg)](https://circleci.com/gh/hashicorp-demoapp/frontend)
56

67
Docker Image: [https://hub.docker.com/repository/docker/hashicorpdemoapp/frontend](https://hub.docker.com/repository/docker/hashicorpdemoapp/frontend)
78

9+
Docker Image: [https://hub.docker.com/repository/docker/hashicorpdemoapp/frontend-nginx](https://hub.docker.com/repository/docker/hashicorpdemoapp/frontend-nginx)
10+
811
# Running
12+
913
The frontend proxies requests to the graphQL backend at the path /api. When running locally ensure your `public-api` is running at `http://localhost:8080` or change package.json before running `yarn start`.
1014

1115
To run the application using the Docker container you need to add nginx configuration like the following example and mount it at `/etc/nginx/conf.d/default.conf`. Set the backend proxy_add for the api to the location of your server.
1216

17+
For the frontend only image:
18+
1319
```
14-
# /etc/nginx/conf.d/default.conf
15-
server {
16-
listen 80;
17-
server_name localhost;
18-
19-
#charset koi8-r;
20-
#access_log /var/log/nginx/host.access.log main;
21-
22-
location / {
23-
root /usr/share/nginx/html;
24-
index index.html index.htm;
25-
}
26-
27-
# Proxy pass the api location to save CORS
28-
location /api {
29-
proxy_pass http://127.0.0.1:18080;
30-
}
31-
32-
error_page 500 502 503 504 /50x.html;
33-
location = /50x.html {
34-
root /usr/share/nginx/html;
35-
}
36-
}
20+
docker run -it -p 3000:3000 hashicorpdemoapp/frontend:v1.0.6
3721
```
3822

23+
For the frontend (with nginx) image:
24+
3925
```
40-
docker run -it -p 8080:80 -v $PWD/nginx.conf:/etc/nginx/conf.d/default.conf hasicorpdemoapp/frontend:v0.0.1
26+
docker run -it -p 80:80 -v $PWD/nginx.conf:/etc/nginx/conf.d/default.conf --env NEXT_PUBLIC_FOOTER_FLAG=test123 hashicorpdemoapp/frontend-nginx
4127
```
4228

4329
# Creating a new release

‎entrypoint-nginx.sh‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
#!/bin/sh
2+
3+
echo "Checking for NEXT_PUBLIC_PUBLIC_API_URL env var"
4+
test -n "$NEXT_PUBLIC_PUBLIC_API_URL"
5+
6+
find /usr/share/nginx/html \( -type d -name .git -prune \) -o -type f -print0 | xargs -0 sed -i "s#APP_NEXT_PUBLIC_API_URL#$NEXT_PUBLIC_PUBLIC_API_URL#g"
7+
8+
echo "Checking for NEXT_PUBLIC_FOOTER_FLAG env var"
9+
test -n "$NEXT_PUBLIC_FOOTER_FLAG"
10+
11+
find /usr/share/nginx/html \( -type d -name .git -prune \) -o -type f -print0 | xargs -0 sed -i "s#APP_PUBLIC_FOOTER_FLAG#$NEXT_PUBLIC_FOOTER_FLAG#g"
12+
13+
echo "Starting HashiCups Frontend"
14+
exec "$@"

‎next.config.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* @type {import('next').NextConfig}
3+
* */
4+
5+
const nextConfig = {
6+
reactStrictMode: true,
7+
experimental: {
8+
images: {
9+
unoptimized: true,
10+
},
11+
},
12+
}
13+
14+
module.exports = nextConfig;

‎nginx.conf‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
server {
2+
listen 80;
3+
server_name localhost;
4+
5+
server_tokens off;
6+
7+
gzip on;
8+
gzip_proxied any;
9+
gzip_comp_level 4;
10+
gzip_types text/css application/javascript image/svg+xml;
11+
12+
proxy_http_version 1.1;
13+
proxy_set_header Upgrade $http_upgrade;
14+
proxy_set_header Connection 'upgrade';
15+
proxy_set_header Host $host;
16+
17+
location / {
18+
root /usr/share/nginx/html;
19+
index index.html index.htm;
20+
}
21+
22+
location /api {
23+
proxy_pass http://localhost:8080;
24+
}
25+
}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"scripts": {
44
"dev": "next dev -p 4001",
55
"build": "next build",
6+
"export": "next build && next export",
67
"start": "next start -p 4001"
78
},
89
"dependencies": {
@@ -13,7 +14,7 @@
1314
"flatted": "^3.2.4",
1415
"graphql": "^16.3.0",
1516
"miragejs": "^0.1.43",
16-
"next": "latest",
17+
"next": "^12.1.0",
1718
"next-dark-mode": "^3.0.0",
1819
"next-themes": "^0.0.15",
1920
"react": "^17.0.2",

‎src/components/Account.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ export default function Account() {
154154
<>
155155
<h1 className="font-semibold text-4xl sm:text-5xl leading-none sm:leading-tight sm:truncate">Your account</h1>
156156
<div className="flex items-center justify-between">
157-
<p className="flex items-center text-black/75 dark:text-white/75 text-sm sm:text-base">Signed in as <span className="flex items-center ml-2 mr-1 opacity-75"><Image src={AvatarIcon} className="dark:invert" /></span> <b>{state.currentUser}</b></p>
157+
<p className="flex items-center text-black/75 dark:text-white/75 text-sm sm:text-base">Signed in as <span className="flex items-center ml-2 mr-1 opacity-75"><Image src={AvatarIcon} className="dark:invert" unoptimized={true}/></span> <b>{state.currentUser}</b></p>
158158
<button onClick={signOut} className="relative whitespace-nowrap text-black/50 dark:text-white/50 hover:text-red-600 dark:hover:text-red-500 hover:bg-red-600/10 rounded-md px-2 py-1 -mx-2 -mx-1 uppercase text-[11px] tracking-widest text-center transition">Sign out</button>
159159
</div>
160160
</>
@@ -184,7 +184,7 @@ export default function Account() {
184184
<form onSubmit={signIn}>
185185
{hasErrors && errorMessages.map((error, index) => (
186186
<div key={index} className="flex items-center bg-red-600/90 border border-red-600 rounded-lg px-3 py-2 space-x-2">
187-
<span className="flex items-center invert opacity-75 flex-shrink-0"><Image src={ErrorIcon} /></span>
187+
<span className="flex items-center invert opacity-75 flex-shrink-0"><Image src={ErrorIcon} unoptimized={true}/></span>
188188
<p className="text-sm text-white/90">{error.message}</p>
189189
</div>
190190
))}

0 commit comments

Comments
 (0)