[AWS] 도커로 리액트 배포하기

 

# 리액트 build 파일 생성
npm run build

# Dockerfile 생성

# nginx.conf 파일 생성

 

• Dockerfile 생성

# nginx 이미지를 사용합니다. 뒤에 tag가 없으면 latest 를 사용합니다.
FROM nginx

# root 에 app 폴더를 생성
RUN mkdir /app

# work dir 고정
WORKDIR /app

# work dir 에 build 폴더 생성 /app/build
RUN mkdir ./build

# host pc의 현재경로의 build 폴더를 workdir 의 build 폴더로 복사
ADD ./build ./build

# nginx 의 default.conf 를 삭제
RUN rm /etc/nginx/conf.d/default.conf

# host pc 의 nginx.conf 를 아래 경로에 복사
COPY ./nginx.conf /etc/nginx/conf.d

# 3000 포트 오픈
EXPOSE 3000

# container 실행 시 자동으로 실행할 command. nginx 시작함
CMD ["nginx", "-g", "daemon off;"]

 

• nginx.conf 파일 생성

server {
    listen 3000;
    location / {
        root    /app/build;
        index   index.html index.html;
        try_files $uri $uri/ /index.html;
    }
}

 

• 윈도우에서 리눅스 서버로 파일 업로드

# 여러 가지 파일을 보낼 경우 -r 옵션 필수
# -r 옵션 없을 경우 not a regular file 에러 발생
scp -i {키페어경로/키페어.pem} -r {유저명}@{주소}:{파일저장경로}

# /home/ec2-user/home 폴더에 리드미파일 저장
scp -i ~/.ssh/{키} ./README.md {인스턴스주소}:~/home/

# /home/ec2-user/ 폴더에 GG폴더 저장
scp -i ~/.ssh/{키} -r ./GG {인스턴스주소}:~/home/

# error: permission denied
# 디렉토리 권한 변경
sudo chmod 766 home

 

• nvm(node version manager) 설치

curl -o- <https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh> | bash

# .bashrc에 반영
source ~/.bashrc
source ~/.bash_profile

# nvm 명령어로 설치 확인

 

• node 설치 (npm도 함께 설치 됨)

# node v9.4.0 설치
nvm install v9.4.0
nvm install v17.9.1

# node 사용 선언
nvm use v9.4.0
[root@ip-{아이피} home]# nvm use 17
Now using node v17.9.1 (npm v8.11.0)

# 반영
source ~/.bashrc

 

• node.js 업그레이드

# 캐시 삭제
npm cache clean --force

# n모듈 설치
npm install -g n

# node.js 설치
npm install -g npm

 

• 리액트 빌드 (로컬에서 빌드 후 서버에 올리는 방법)

# 1. npm run build로 리액트 파일 빌드

# 2. build된 디렉토리로 이동 (build 폴더 안으로 이동)

# 3. build 폴더 안의 파일들을 tar 파일로 압축 (build 폴더가 아니라 build 폴더 안 파일들만 압축)
$ tar cvfz web.0.1.tar .

# 3-1. tar 없을 경우 설치 필요
$ sudo apt-get install tar

# 4. aws 서버에 빌드 파일 업로드 (~/.ssh/thispotsvr.pem : aws 접속키 경로)
$ scp -i ~/.ssh/{키} ./web.0.1.tar {인스턴스주소}:{폴더경로}

# 4-1. .ssh 폴더 없을 경우 SSH Key 생성 후 .ssh 폴더에 가지고 있는 접속키를 넣어주기
$ cd ~
$ ssh-keygen -t rsa

# 5. 서버 접속
$ ssh -i ~/.ssh/{키} {인스턴스주소}

# 6. 빌드 파일이 업로드된 디렉토리로 이동
$ cd {폴더경로}

# 7. 이동한 디렉토리에서 압축 해제
$ tar xvfz web.0.1.tar

# 끝

 

 

인스턴스에 바로 깃을 연동하여 내려받은 후 빌드하거나

젠킨스를 사용하여 깃에 업로드하면 서버에 자동 빌드 되도록 설정하는 방법도 있다.