✨

2024. 9. 30 Docker-Github Action 실습 복기

생성일

2025/01/24 05:52

태그

EC2 연결 (기본 설정 완료 되었다고 가정)

Host my-server
    HostName EC2 IP 주소
    User ubuntu
    IdentityFile ~/.ssh/my-key.pem (키 경로 설정)
Shell
복사

•

해당 경로에 pem 파일이 있어야 하며 권한을 400으로 해줘야 정상 연결 됨

◦

Visual Studio Code의 터미널에서 진행 가능

Docker 설치

sudo apt-get update
sudo apt-get install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

# Add the repository to Apt sources:
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update

sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

ubuntu@ip-172-31-34-164:~$ sudo usermod -aG docker $USER
ubuntu@ip-172-31-34-164:~$ newgrp docker
ubuntu@ip-172-31-34-164:~$ docker info
Shell
복사

Front

Organization 생성 후 Front Repository 생성

배포할 Project 세팅

•

다음과 같이 세팅

•

env파일 gitignore 설정

# misc
.env
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
Shell
복사

•

docker-compose.yml

•

Dockerfile

FROM node:20 AS build
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install
COPY . .
RUN yarn run build

FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
RUN rm -rf /usr/share/nginx/html/*
COPY --from=build /app/build/ /usr/share/nginx/html
EXPOSE 80
EXPOSE 443

CMD ["nginx", "-g", "daemon off;"]
Shell
복사

•

git init 선언 이후에 Front Repository에 커밋한 다음 푸시

haminsung@codesche-ui-MacBookPro docker-action-front $ git init
Initialized empty Git repository in /Users/haminsung/Desktop/test/docker-action-front/.git/
haminsung@codesche-ui-MacBookPro docker-action-front $ git add .
haminsung@codesche-ui-MacBookPro docker-action-front $ git commit -m "front-project setting"
[main (root-commit) 5844ac2] front-project setting
 51 files changed, 12588 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 Dockerfile
 create mode 100644 README.md
 create mode 100644 docker-compose.yml
 create mode 100644 nginx.conf
 create mode 100644 package.json
 create mode 100644 public/favicon.ico
 create mode 100644 public/index.html
 create mode 100644 public/logo192.png
 create mode 100644 public/logo512.png
 create mode 100644 public/manifest.json
 create mode 100644 public/robots.txt
 create mode 100644 src/App.css
 create mode 100644 src/App.js
 create mode 100644 src/App.test.js
 create mode 100644 src/api/api.js
 create mode 100644 src/api/services/favorite.js
 create mode 100644 src/api/services/oauth.js
 create mode 100644 src/api/services/post.js
 create mode 100644 src/api/services/user.js
 create mode 100644 src/assets/google.png
 create mode 100644 src/assets/kakao.png
 create mode 100644 src/components/auth/Login.jsx
 create mode 100644 src/components/auth/OAuthLogin.jsx
 create mode 100644 src/components/auth/SignUp.jsx
 create mode 100644 src/components/common/AccessControl.jsx
 create mode 100644 src/components/common/Error.jsx
 create mode 100644 src/components/common/Home.jsx
 create mode 100644 src/components/common/NotFound.jsx
 create mode 100644 src/components/favorite/FavAccordion.jsx
 create mode 100644 src/components/favorite/FavForm.jsx
 create mode 100644 src/components/favorite/FavList.jsx
 create mode 100644 src/components/layouts/Drawer.jsx
 create mode 100644 src/components/layouts/Header.jsx
 create mode 100644 src/components/layouts/Layout.jsx
 create mode 100644 src/components/layouts/Main.jsx
 create mode 100644 src/components/posts/Post.jsx
 create mode 100644 src/components/posts/PostCard.jsx
 create mode 100644 src/components/posts/PostDetail.jsx
 create mode 100644 src/components/posts/PostForm.jsx
 create mode 100644 src/components/users/User.jsx
 create mode 100644 src/contexts/LoginContext.jsx
 create mode 100644 src/hooks/useAuth.jsx
 create mode 100644 src/hooks/useProvideAuth.jsx
 create mode 100644 src/index.css
 create mode 100644 src/index.js
 create mode 100644 src/logo.svg
 create mode 100644 src/reportWebVitals.js
 create mode 100644 src/setupTests.js
 create mode 100644 src/utils/cookieUtil.js
 create mode 100644 yarn.lock
haminsung@codesche-ui-MacBookPro docker-action-front (main) $ git branch -M main
haminsung@codesche-ui-MacBookPro docker-action-front (main) $ git remote add origin https://github.com/docker-action-test-organization/front.git
haminsung@codesche-ui-MacBookPro docker-action-front (main) $ git push -u origin main
Enumerating objects: 68, done.
Counting objects: 100% (68/68), done.
Delta compression using up to 10 threads
Compressing objects: 100% (65/65), done.
Writing objects: 100% (68/68), 236.93 KiB | 15.79 MiB/s, done.
Total 68 (delta 1), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (1/1), done.
To https://github.com/docker-action-test-organization/front.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.
haminsung@codesche-ui-MacBookPro docker-action-front (main) $ 
Shell
복사

Github Actions 에서 “set up a workflow yourself” 클릭

•

ubuntu에 git clone

ubuntu@ip-172-31-2-73:~$ git clone https://github.com/docker-action-test-organization/front.git
Cloning into 'front'...
remote: Enumerating objects: 82, done.
remote: Counting objects: 100% (82/82), done.
remote: Compressing objects: 100% (65/65), done.
remote: Total 82 (delta 10), reused 82 (delta 10), pack-reused 0 (from 0)
Receiving objects: 100% (82/82), 71.16 KiB | 7.91 MiB/s, done.
Resolving deltas: 100% (10/10), done.
Shell
복사

front-workflow.yml 생성

name: FRONT-WORKFLOW
on: 
  push:
    branches: [ "main" ]
jobs:
  front-job:
    runs-on: ubuntu-latest
    steps:
      - name: SSH
        uses: appleboy/ssh-action@master
        with: 
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: $ {{ secrets.KEY }}
          script: |
            set -e
            cd front-hms
            echo -e "REACT_APP_REST_SERVER=${{ secrets.REST_SERVER }}" >> env
            echo -e "REACT_APP_GOOGLE_ID=${{ secrets.GOOGLE_ID }}" >> env
            echo -e "REACT_APP_GOOGLE_REDIRECT_URI={{ secrets.GOOGLE_REDIRECT_URI }}" >> env
            echo -e "REACT_APP_KAKAO_ID={{ secrets.KAKAO_ID }}" >> env
            echo -e "REACT_APP_KAKAO_REDIRECT_URI={{ secrets.KAKAO_REDIRECT_URI }}" >> env

            git_output=$(sudo git pull origin main 2>&1)

            docker compose up -d --build
Shell
복사

Setting 메뉴에서 Secrets and variables > Actions 클릭하여 “New repository secret” 클릭

•

각각의 환경변수에 매칭되는 비밀값 넣어주기

docker 주소:
https://docs.docker.com/engine/install/ubuntu/

HOST=13.209.80.181
USERNAME=ubuntu
KEY=my-blog
JWT_KEY=mysecrethmsmysecrethmsmysecrethmsmysecret
REST_SERVER="https://dodream.store/api"
GOOGLE_ID=530115480345-84amh51vqf0h8iq9h06o9qu3g8e0s9np.apps.googleusercontent.com
GOOGLE_KEY=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
GOOGLE_REDIRECT_URI=https://dodream.store/oauth/google
KAKAO_ID=a0af8d5965cdea46c2506401963ea186
KAKAO_KEY=SJNpFkzY7dXn7v7D6MrrMmXytWZUPpjn
KAKAO_REDIRECT_URI=https://dodream.store/oauth/kakao

MYSQL_USER=dodream
MYSQL_PASSWORD=1234
MYSQL_DATABASE=rest_blog-db
TZ=Asia/Seoul
SPRING_DATASOURCE_URL=jdbc:mysql://mysql-container:3306/rest_blog-db
SPRING_DATASOURCE_USERNAME=root
Shell
복사

Back

•

다음과 같이 세팅

•

.env, application.yml gitignore 설정

HELP.md
.gradle
build/
!gradle/wrapper/gradle-wrapper.jar
!**/src/main/**/build/
!**/src/test/**/build/

### STS ###
**/application.yml
.env
.apt_generated
.classpath
.factorypath
.project
.settings
.springBeans
.sts4-cache
bin/
!**/src/main/**/bin/
!**/src/test/**/bin/

### IntelliJ IDEA ###
.idea
*.iws
*.iml
*.ipr
out/
!**/src/main/**/out/
!**/src/test/**/out/

### NetBeans ###
/nbproject/private/
/nbbuild/
/dist/
/nbdist/
/.nb-gradle/

### VS Code ###
.vscode/
Shell
복사

•

Dockerfile

FROM gradle:8-jdk17-alpine As build
WORKDIR /app
COPY build.gradle settings.gradle gradlew ./
COPY gradle ./gradle
COPY . .
RUN chmod +x gradlew
RUN ./gradlew clean build -x test

FROM openjdk:17-jdk-alpine
WORKDIR /app
COPY --from=build /app/build/libs/*.jar /app/app.jar
EXPOSE 8080
ENTRYPOINT [ "java", "-jar", "/app/app.jar" ]
Shell
복사

•

docker-compose.yml

version: '3'
services:
  mysql:
    image: mysql:8
    container_name: mysql-container
    environment:
      - MYSQL_ROOT_PASSWORD=${MYSQL_PASSWORD}
      - MYSQL_USER=${MYSQL_USER}
      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
      - MYSQL_DATABASE=${MYSQL_DATABASE}
      - TZ=${TZ}
    ports:
      - "3306:3306"
    networks:
      - server-net
    volumes:
      - mysql-data:/var/lib/mysql
  back:
    build: 
      context: .
    container_name: back-container
    ports:
      - "8080:8080"
    environment:
      - SPRING_DATASOURCE_URL=${SPRING_DATASOURCE_URL}
      - SPRING_DATASOURCE_USERNAME=${MYSQL_USER}
      - SPRING_DATASOURCE_PASSWORD=${MYSQL_PASSWORD}
    networks:
      - server-net
    depends_on:
      - mysql
    restart: always
networks:
  server-net:
    driver: bridge 
volumes:
  mysql-data:
Shell
복사

•

build.gradle

•

git init 선언 이후에 Back Repository에 커밋한 다음 푸시

•

ubuntu에 git clone

ubuntu@ip-172-31-2-73:~$ git clone https://github.com/docker-action-test-organization/back-docker.git
Cloning into 'back-docker'...
remote: Enumerating objects: 82, done.
remote: Counting objects: 100% (82/82), done.
remote: Compressing objects: 100% (65/65), done.
remote: Total 82 (delta 10), reused 82 (delta 10), pack-reused 0 (from 0)
Receiving objects: 100% (82/82), 71.16 KiB | 7.91 MiB/s, done.
Resolving deltas: 100% (10/10), done.
Shell
복사

•

Front와 동일하게 Action 들어가서 back-workflow.yml 파일 작성

name: BACK-WORKFLOW
on:
  push:
    branches: [ "main" ]
jobs:
  back-job:
    runs-on: ubuntu-latest
    steps: 
      - name: SSH
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST }}
          username: ${{ secrets.USERNAME }}
          key: ${{ secrets.KEY }}
          script: |
            set -e
            cd back
            mkdir -p src/main/resources
            cat <<EOF > src/main/resources/application.yml
            spring:
              application:
                  name: rest_blog
              jpa:
                  generate-ddl: true
                  show-sql: true
                  open-in-view: false
              sql:
                  init:
                      mode: never
              upload:
                  location: /home/image
              servlet:
                multipart:
                  max-file-size: 100MB
                  max-request-size: 100MB
            jwt:
                issuer: ${{ secrets.USERNAME}}
                secret_key: ${{ secrets.JWT_KEY }}
                access_duration: 5000         # 1800000    # 30분 (30 * 60 * 1000)
                refresh_duration: 8640000     # 24시간 (24 * 60 * 60 * 1000)
            
            oauth2:
                clients:
                    google:
                        client-id: ${{ secrets.GOOGLE_ID }}
                        client-secret: ${{ secrets.GOOGLE_KEY }}
                        redirect-uri: ${{ secrets.GOOGLE_REDIRECT_URI }}
                        token-uri: https://oauth2.googleapis.com/token
                        user-info-request-uri: https://www.googleapis.com/oauth2/v3/userinfo
                    kakao:
                        client-id: ${{ secrets.KAKAO_ID }}
                        client-secret: ${{ secrets.KAKAO_KEY }}
                        redirect-uri: ${{ secrets.KAKAO_REDIRECT_URI }}
                        token-uri: https://kauth.kakao.com/oauth/token
                        user-info-request-uri: https://kapi.kakao.com/v2/user/me 
            EOF

            echo -e "MYSQL_USER=${{ secrets.MYSQL_USER }}" >> .env
            echo -e "MYSQL_PASSWORD=${{ secrets.MYSQL_PASSWORD }}" >> .env
            echo -e "MYSQL_DATABASE=${{ secrets.MYSQL_DATABASE }}" >> .env
            echo -e "TZ=${{ secrets.TZ }}" >> .env
            echo -e "SPRING_DATASOURCE_URL=${{ secrets.SPRING_DATASOURCE_URL }}" >> .env
            echo -e "SPRING_DATASOURCE_USERNAME=${{ secrets.SPRING_DATASOURCE_USERNAME }}" >> .env

            git_output=$(sudo git pull origin main 2>&1)

            docker compose up -d --build
          
Shell
복사

Setting 메뉴에서 Secrets and variables > Actions 클릭하여 “New repository secret” 클릭

•

각각의 환경변수에 매칭되는 비밀값 넣어주기

•

환경변수

docker 주소:
https://docs.docker.com/engine/install/ubuntu/

HOST=13.209.80.181
USERNAME=ubuntu
KEY=my-blog
JWT_KEY=mysecrethmsmysecrethmsmysecrethmsmysecret
REST_SERVER="https://dodream.store/api"
GOOGLE_ID=530115480345-84amh51vqf0h8iq9h06o9qu3g8e0s9np.apps.googleusercontent.com
GOOGLE_KEY=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
GOOGLE_REDIRECT_URI=https://dodream.store/oauth/google 
KAKAO_ID=a0af8d5965cdea46c2506401963ea186   // 앱 키 - REST API 키
KAKAO_KEY=SJNpFkzY7dXn7v7D6MrrMmXytWZUPpjn  // 보안 메뉴
KAKAO_REDIRECT_URI=https://dodream.store/oauth/kakao

MYSQL_USER=dodream
MYSQL_PASSWORD=1234
MYSQL_DATABASE=rest_blog-db
TZ=Asia/Seoul
SPRING_DATASOURCE_URL=jdbc:mysql://mysql-container:3306/rest_blog-db
SPRING_DATASOURCE_USERNAME=root
Shell
복사