Skip to content

Commit 72e04a8

Browse files
ciatphciatph
authored
Merge pull request #45 from ciatph/dockerize
dockerize client and server
2 parents 0a2ea21 + ab94951 commit 72e04a8

15 files changed

Lines changed: 2476 additions & 922 deletions

‎README.md‎

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,17 @@
44

55
A basic web app client in the **/client** directory will show basic API usage and demonstration.
66

7+
## Content
8+
9+
- [Requirements](#requirements)
10+
- [Installation](#installation)
11+
- [Usage](#usage)
12+
- [Available Scripts - server](#available-scripts---server)
13+
- [Installation and Usage Using Docker](#installation-and-usage-using-docker)
14+
- [Docker for Localhost Development](#docker-for-localhost-development)
15+
- [Docker for Production Deployment](#docker-for-production-deployment)
16+
- [References](#references)
17+
718
## Requirements
819

920
1. Windows 10, MacOS, Linux
@@ -57,6 +68,7 @@ A basic web app client in the **/client** directory will show basic API usage an
5768
- You can find this file in a Firebase project's
5869
**Project Settings** -> **General** -> **Web apps** (Add an app if needed) -> **SDK setup and configuration**
5970
3. Create a `/client/.env` file from the `/client/.env.example` file.
71+
- The `firebase.config.js` settings must match with the `FIREBASE_SERVICE_ACC` environment variable provided on **server - step # 3.**
6072
- Replace `REACT_APP_BASE_URL` with the domain on which the CRUD API is running (default value is `http://localhost:3001/api` on localhost. See the [server](#server) set-up instructions for more information).
6173
4. Run the app in development mode.
6274
`npm start`
@@ -85,7 +97,6 @@ A basic web app client in the **/client** directory will show basic API usage an
8597
- Try signing in these users to the `/client` app.
8698
- > **NOTE:** Comment out the `cors` options line `app.use(cors(corsOptions))` on **/server/src/index.js** when testing on Postman and other http clients other than the `/client` app.
8799
88-
89100
## Available Scripts - server
90101

91102
The npm scripts listed below are available under the **/server** directory.
@@ -124,5 +135,52 @@ Copies the built `/client` website from `/client/build` to the server's root dir
124135
```
125136
- The built client app will be viewable on `http://localhost:3001` if the server is running.
126137

138+
139+
## Installation and Usage Using Docker
140+
141+
We can use Docker to run dockerized **client** and **server** apps for local development. The following methods require Docker and Docker compose correctly installed and set up on your development machine.
142+
143+
### Docker for Localhost Development
144+
145+
1. Set-up the environment variables and firebase configuration file for the **/client** app.
146+
- Create (your own) `firebase.config.js` file under `/client/utils/firebase/firebase.config.js` as advised on [**Installation - client # 2**](#client).
147+
- Create the `.env` file under the **/client** directory as advised on [**Installation - client # 3**](#client).
148+
2. Set-up the environment variables for the **/server** app.
149+
- Create the `.env` file under the **/server** directory as advised on [**Installation - server # 3**](#server).
150+
3. Build the client and server docker services for localhost development.
151+
- `docker-compose -f docker-compose-dev.yml build`
152+
- > **INFO:** Building the images for localhost development takes a while, around ~7min+.
153+
4. Create and start the client and server containers.
154+
`docker-compose -f docker-compose-dev.yml up`
155+
5. Launch the dockerized (dev) client app on
156+
`http://localhost:3000`
157+
6. Launch the dockerized (dev) server app's API documentation on
158+
`http://localhost:3001/docs`
159+
7. Edit source the codes in `/client/src` or `/server/src` as needed. Verify that hot reload is working on both the client and server apps.
160+
8. Stop and remove containers, networks, images and volumes:
161+
`docker-compose -f docker-compose-dev.yml down`
162+
163+
### Docker for Production Deployment
164+
165+
The following docker-compose commands build small client and server images targeted for creating optimized dockerized apps running on production servers. Hot reload is not available when editing source codes from `/client/src` or `/server/src`.
166+
167+
1. Install and set up the required environment variables as with the required variables on **Docker for Localhost Development**.
168+
2. Build the client and server docker services for production deployment.
169+
- `docker-compose -f docker-compose-prod.yml build`
170+
3. At this point, we can opt to push the docker images to a docker registry of your choice. (Requires sign-in to the selected docker registry).
171+
- `docker-compose -f docker-compose-prod.yml push`
172+
4. Create and start the client and server containers.
173+
`docker-compose -f docker-compose-prod.yml up`
174+
5. Launch the dockerized (prod) client app on
175+
`http://localhost:3000`
176+
6. Launch the dockerized (prod) server app's API documentation on
177+
`http://localhost:3001/docs`
178+
7. Stop and remove containers, networks, images and volumes:
179+
`docker-compose -f docker-compose-prod.yml down`
180+
181+
## References
182+
183+
[[1]](https://docs.docker.com/compose/reference/) - docker compose commands
184+
127185
@ciatph
128186
20220406

‎client/.dockerignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.git
2+
.gitignore
3+
node_modules
4+
Dockerfile
5+
.dockerignore

‎client/Dockerfile‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# BASE PROFILE
2+
FROM node:14.19.3-alpine as base
3+
RUN mkdir -p /opt/client
4+
WORKDIR /opt/client
5+
RUN adduser -S client
6+
RUN chown -R client /opt/client
7+
COPY package*.json ./
8+
9+
# BUILD TARGET
10+
FROM base as build
11+
RUN npm install && npm cache clean --force
12+
COPY . ./
13+
RUN npm run build
14+
USER client
15+
16+
# DEVELOPMENT CLIENT PROFILE
17+
FROM base as development
18+
ENV NODE_ENV=development
19+
RUN npm install && npm cache clean --force
20+
COPY . ./
21+
EXPOSE 3000
22+
CMD ["npm", "start"]
23+
24+
# PRODUCTION CLIENT PROFILE
25+
FROM nginx:1.22.0-alpine as production
26+
COPY --from=build /opt/client/build /usr/share/nginx/html
27+
RUN rm /etc/nginx/conf.d/default.conf
28+
COPY nginx/nginx.conf /etc/nginx/conf.d
29+
EXPOSE 3000
30+
CMD ["nginx", "-g", "daemon off;"]

‎client/nginx/nginx.conf‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
server {
2+
listen 3000;
3+
server_name localhost;
4+
5+
location /api {
6+
proxy_pass http://server:3001;
7+
}
8+
9+
location / {
10+
root /usr/share/nginx/html;
11+
index index.html index.html
12+
try_files $uri /index.html;
13+
}
14+
15+
error_page 500 502 503 504 /50x.html;
16+
location = /50x.html {
17+
root /usr/share/nginx/html;
18+
}
19+
}

‎docker-compose.dev.yml‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
version: "2.6.0"
2+
services:
3+
client-dev:
4+
container_name: client-dev
5+
image: ciatphdev/firebase-users-admin-client:dev
6+
env_file:
7+
- ./client/.env
8+
build:
9+
context: ./client
10+
dockerfile: Dockerfile
11+
target: development
12+
volumes:
13+
- ./client/public:/opt/client/public
14+
- ./client/src:/opt/client/src
15+
ports:
16+
- "3000:3000"
17+
18+
server-dev:
19+
container_name: server-dev
20+
image: ciatphdev/firebase-users-admin-server:dev
21+
env_file:
22+
- ./server/.env
23+
build:
24+
context: ./server
25+
dockerfile: Dockerfile
26+
target: development
27+
volumes:
28+
- ./server/src:/opt/server/src
29+
ports:
30+
- "3001:3001"

‎docker-compose.prod.yml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
version: "2.6.0"
2+
services:
3+
client-prod:
4+
container_name: client-prod
5+
image: ciatphdev/firebase-users-admin-client:latest
6+
env_file:
7+
- ./client/.env
8+
build:
9+
context: ./client
10+
dockerfile: Dockerfile
11+
target: production
12+
ports:
13+
- "3000:3000"
14+
15+
server-prod:
16+
container_name: server-prod
17+
image: ciatphdev/firebase-users-admin-server:latest
18+
env_file:
19+
- ./server/.env
20+
build:
21+
context: ./server
22+
dockerfile: Dockerfile
23+
target: production
24+
ports:
25+
- "3001:3001"

‎server/.dockerignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.git
2+
.gitignore
3+
node_modules
4+
Dockerfile
5+
.dockerignore

‎server/.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
node_modules/
2-
src/public/
32
.env
43
.env.dev
54
.env.prod

‎server/Dockerfile‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# BASE PROFILE
2+
FROM node:14.19.3-alpine AS base
3+
RUN mkdir -p /opt/server
4+
WORKDIR /opt/server
5+
RUN adduser -S server
6+
RUN chown -R server /opt/server
7+
COPY package*.json ./
8+
9+
# BUILD API DOCUMENTATION
10+
FROM base as build
11+
RUN npm install && npm cache clean --force
12+
COPY . .
13+
RUN npm run build
14+
15+
# PRODUCTION PROFILE TARGET
16+
FROM base as production
17+
ENV NODE_ENV production
18+
RUN npm ci --only=production && npm cache clean --force
19+
RUN npm install --save pm2
20+
COPY . .
21+
COPY --from=build /opt/server/public/docs ./public/docs
22+
USER server
23+
EXPOSE 3001
24+
CMD ["npm", "run", "pm2"]
25+
26+
# DEVELOPMENT PROFILE TARGET
27+
FROM base as development
28+
ENV NODE_ENV development
29+
RUN npm install && npm cache clean --force
30+
COPY . .
31+
COPY --from=build /opt/server/public/docs ./public/docs
32+
USER server
33+
EXPOSE 3001
34+
CMD ["npm", "run", "dev"]

0 commit comments

Comments
 (0)