Gitlab CI/CD of react app in docker container 用gitlab CI/CD部署docker container react app [Updated: 2023-12-13]

1.0 Download project

?

1	git clone http://oauth2:{token}@{host}/{user}/{project} {dir_folder}

　　download project to target server

 

2.0 Install gitlab runner

https://docs.gitlab.com/runner/install/linux-repository.html

有几種方法安裝gitlab runner。

簡單的，直接用apt-get安裝。

複雜的，把gitlab runner部署到docker container里。

因為本地Server，所以最終用簡單的apt-get安裝。

?

1 2	sudo curl -L "https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.deb.sh" | sudo bash sudo apt-get install gitlab-runner

　　download & install gitlab runner

 

3.0 Register gitlab runner

https://docs.gitlab.com/runner/register/

Go to project -> Setting -> CI/CD -> Runners

Copy {URL} & {TOKEN}

?

1 2 3 4

sudo gitlab-runner register {URL} {TOKEN} shell

　　進入register，依次輸入{URL}，{TOKEN}，shell (即在本地服務器運行)。

 

?

1	sudo vi /etc/gitlab-runner/config.toml

　　註冊表

 成功註冊

 

4.0 CI/CD Pipline (.gitlab-ci.yml)

Go to CI/CD -> Editor

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

variables:   CONTAINER_NAME: "react_test001"   CONTAINER_PORT: "8081"   IMAGE_BASE_NAME: "$CONTAINER_NAME/node:18.12.1"   IMAGE_NAME: "$CONTAINER_NAME/nginx:1.23.2"   stages:   - build   - deploy   build-job:   stage: build   script:     - git pull origin main     - docker stop $CONTAINER_NAME || true     - docker rm $CONTAINER_NAME || true     - docker rmi -f $IMAGE_NAME || true     - docker rmi -f $IMAGE_BASE_NAME || true     - docker build --target builder --tag $IMAGE_BASE_NAME .     - docker build --target main --tag $IMAGE_NAME .   only:     - main   deploy-job:   stage: deploy   environment: production   script:     - docker run --name $CONTAINER_NAME -d -p $CONTAINER_PORT:8080 $IMAGE_NAME   only:     - main

　　Gitlab Template。

 

Stage

Code

Desciption

1.0 global

?

1 2 3 4 5

variables:   CONTAINER_NAME: "react_test001"   CONTAINER_PORT: "8081"   IMAGE_BASE_NAME: "$CONTAINER_NAME/node:18.12.1"   IMAGE_NAME: "$CONTAINER_NAME/nginx:1.23.2"

global params

2.0 build

?

1	- git pull origin main

pull project source code

2.1 build

?

1 2 3 4

- docker stop $CONTAINER_NAME || true - docker rm $CONTAINER_NAME || true - docker rmi -f $IMAGE_NAME || true - docker rmi -f $IMAGE_BASE_NAME || true

remove docker images & containers

2.2 build

?

1 2	- docker build --target builder --tag $IMAGE_BASE_NAME . - docker build --target main --tag $IMAGE_NAME .

two build stage
a. node
b. nginx

3.0 deploy

?

1	- docker run --name $CONTAINER_NAME -d -p $CONTAINER_PORT:8080 $IMAGE_NAME

deploy react app

 

5.0 Docker container (Node React App, Nginx)

5.1 Dockerfle

https://javascript.plainenglish.io/how-to-serve-a-react-app-with-nginx-in-a-non-root-docker-container-cbc4c6acc177

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

FROM node:18.12.1-buster-slim AS builder WORKDIR /app COPY package.json package-lock.json ./ COPY public/ public/ COPY src/ src/ RUN npm ci RUN npm run build   FROM nginx:1.23.2-alpine AS main COPY nginx.conf /etc/nginx/conf.d/default.conf COPY --from=builder /app/build /usr/share/nginx/html RUN touch /var/run/nginx.pid RUN chown -R nginx:nginx /var/run/nginx.pid /usr/share/nginx/html /var/cache/nginx /var/log/nginx /etc/nginx/conf.d USER nginx EXPOSE 8080 CMD ["nginx", "-g", "daemon off;"]

　　Dockerfile。在.gitlab-ci.yml拆開了docker build stage。

Target	Description
1.0 builder	Node libraries Build react app
2.0 main	Copy files to nginx root folder Start nginx

 

5.2 nginx.conf

?

1 2 3 4 5 6 7 8 9 10

server_tokens off; server {     listen       8080;     server_name  localhost;     location / {         root   /usr/share/nginx/html;         index  index.html index.htm;         try_files $uri /index.html;     } }

　　創建nginx.conf。是nginx的config。

 

5.3 If manually

?

1 2	docker build -t react/trial:1.0 . docker run --name react_trial -d -p 8080:8080 react/trial:1.0

　　build & run.

Go to 127.0.0.1:8080 & enjoy.

 

6.0 Auto trigger CI/CD pipline

不用指定branch也可trigger CI/CD pipeline。

 

7.0 Completed

 只要merge branch，就會trigger CI/CD pipeline自動deploy。

 

 也可以手動執行。

 

Updated: 2023-12-13

Docker: Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock

權限問題。

 

chmod 777 /var/run/docker.sock

提權。