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

1.0 Download project

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安裝。

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}

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

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

 

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

　　註冊表

 成功註冊

 

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

Go to CI/CD -> Editor

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	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	- git pull origin main	pull project source code
2.1 build	- 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	- 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	- 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

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

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

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

提權。