gitlab ci Docker 연동(React)

구현 환경  : AWS(ubuntu 20.04) , nodejs

 

출처 : 

[GitLab CI] docker gitlab-runner 등록 및 간단 예제 (tistory.com)

https://www.devopsschool.com/blog/setup-docker-service-to-use-insecurehttp-registry-instead-of-https/

https://hihellloitland.tistory.com/65

https://hihellloitland.tistory.com/63

https://otrodevym.tistory.com/474

https://not-to-be-reset.tistory.com/326

https://gitlab.com/gitlab-org/gitlab-runner/-/issues/5026

 

-  Docker  private registry 설치

우분투 초기 이미지 업데이트 레포 찾음  apt update 도커 컴포저 설치  apt install docker-compose 도커 레지스트리 설치  docker pull registry:latest 레지스트리 이미지 구동 docker run --name local-registry -d --restart=always -p 5000:5000 -v /data/registry:/var/lib/registry/docker/registry/v2 registry:latest

빨간색 처럼 private repo 컨테이너 올라가면  실패 재설치

아래 그림처럼 올라가면 성공

 

 

본인이 구축할 private repo IP주소를 작성하면 됩니다.

push시 https만 허용만 가능하여 이렇게 강제로 설정해 줍니다.

 

vi /etc/docker/daemon.json

{ "insecure-registries" : ["13.125.27.25:5000"] }

 

도커 재 실행 

service docker restart

 

- 방화벽 오픈 (5000, 8900번)

윈도우 도스창에서 telnet  xxx.xxx.xxx.xxx 5000 제대로 접근 가능한지 확인

##############################################################################

-  Gitlab runnuer 설치

 

mkdir -p /opt/gopath/src/gitlab/

cd /opt/gopath/src/gitlab/

vi docker-compose.gitlab.runner.yml 파일 생성

gitlab-runner:  container_name: gitlab-runner  image: 'gitlab/gitlab-runner:latest'  restart: always  volumes:   - '/srv/gitlab-runner/config:/etc/gitlab-runner'   - '/var/run/docker.sock:/var/run/docker.sock'   - '/usr/bin/docker:/usr/bin/docker'

 

도커 compose파일 실행 

도커 컴포저 실행 docker-compose -f /opt/gopath/src/gitlab/docker-compose.gitlab.runner.yml up -d 컨테이너 실행 확인  docker container ls

 

gitlab  새로운 project에 파일 3개 생성

Dockerfile

# This file is a template, and might need editing before it works on your project. FROM node:10 WORKDIR /usr/src/app ARG NODE_ENV ENV NODE_ENV $NODE_ENV COPY package.json /usr/src/app/ RUN yarn install COPY . /usr/src/app # replace this with your application's default port EXPOSE 3000 CMD [ "yarn", "start" ]

리엑트 프로젝트 샘플

 

package.json

{   "name": "deployReact",   "version": "0.1.0",   "private": true,   "dependencies": {     "axios": "0.18.1",     "enzyme": "^3.8.0",     "enzyme-adapter-react-16.3": "^1.4.1",     "moment": "^2.24.0",     "next": "^8.1.0",     "node-build-tools": "^0.3.2",     "node-gyp": "^3.8.0",     "python2": "^0.0.1",     "react": "^16.7.0",     "react-dom": "^16.7.0",     "react-redux": "^6.0.0",     "react-router-dom": "^5.0.0",     "react-scripts": "2.1.7",     "react-test-renderer": "^16.7.0",     "react-with-styles": "^3.2.1",     "recompose": "^0.30.0",     "redux": "^4.0.1",     "redux-pack": "^0.1.5",     "redux-thunk": "^2.3.0",     "reselect": "^4.0.0",     "selector-action": "^1.1.1",     "web-vitals": "^2.1.2"   },   "scripts": {     "dev": "next",     "predeploy": "yarn build-all",     "deploy": "firebase deploy",     "build-all": "yarn ssrbuild && yarn build-firebase",     "build-firebase": "cd \"./functions\" && yarn --ignore-engines",     "ssrbuild": "next build",     "storybook": "start-storybook -p 9001 -c .storybook",     "start": "react-scripts start",     "build": "react-scripts build",     "test": "react-scripts test",     "mockserver": "json-server --watch --delay 500 --port 4000 mock/create.js",     "errorserver": "node mock/fake.js",     "eject": "react-scripts eject"   },   "eslintConfig": {     "extends": "react-app"  },   "browserslist": [     ">0.2%",     "not dead",     "not ie <= 11",     "not op_mini all"   ],   "devDependencies": {     "@babel/core": "7.5.5",     "@babel/plugin-syntax-object-rest-spread": "^7.2.0",     "@storybook/addon-actions": "^5.2.6",     "@storybook/addons": "^5.2.6",     "@storybook/react": "^5.2.6",     "aphrodite": "^2.2.3",     "babel-loader": "^8.0.5",     "json-server": "^0.14.2",     "node-sass": "^4.12.0",     "react-with-styles-interface-aphrodite": "^5.0.1",     "redux-devtools-extension": "^2.13.8",     "sass-loader": "^7.1.0",     "storybook-addon-jsx": "^7.1.13"   } }

토큰값 확인 

신용카드 auth도 진행하는데 해외결제 그낭 카드번호만 넣으면 완료

 

 

gitlab-runner 컨테이너에서 등록

아래 보라색 두값만 위 2번에 맞게 쓰시면 되고 Docker 컨테이너 내부 에서 유일하게 진행하는 작업.

그외는 모두 Docker 밖에서 실행

도커 gitlab-runner 컨테이너 실행 docker container exec -it gitlab-runner bash root@4abec937906f:/# gitlab-runner register -n \ --url https://gitlab.com/ \ --registration-token M9토큰값 \ --description gitlab-runner \ --executor docker \ --docker-image docker:latest \ --docker-volumes /var/run/docker.sock:/var/run/docker.sock

 

Edit를 클릭하여 Tags에  [gitlab-cicd-tag] 작성

 

위에 설정한 tag는 아래 yml파일에서도 사용

리엑트 프로젝트는 포트 3000으로 실행

.gitlab-ci.yml

stages:   - test   - build   - deploy variables:   IMAGE_NAME: 13.125.27.25:5000/nodejs-server-test:latest cache:   paths:     - node_modules/      test:   stage: test   image: node:10   script:     - env     - yarn build:   stage: package   tags:     - gitlab-cicd-tag   image: docker:latest   services:     - docker:dind   stage: build   script:     - ls -al     - docker container ls -a     - docker build . -t $IMAGE_NAME     - docker push $IMAGE_NAME     - docker images | grep '13.125.27.25' deploy:   stage: deploy   tags:     - gitlab-cicd-tag   image: docker:latest   services:     - docker:dind   script:     - docker container ls -a     - docker container rm -f nodejs-server      - docker run -d -p 3000:3000 --name nodejs-server --restart always $IMAGE_NAME     - docker container ls -a

 

 

 

 

 

gitlab 해당 프로젝트에 파일이 push뒤면 ci pipe라인에서 자동으로 실행 됩니다.

서버 사양은 꽤나 높으면 빠를거 같습니다.