전에는 SSR로 구현하고 express를 배포했었는데, 이번에는 프/백 따로 배포하면서 React를 배포해야했다.
배포까지 크게 다른 부분은 없었다. 그냥 ncloud에서 받은 서버로 ssh 접속하고 git clone한 다음에 npm start
하면 실행이 된다.
하지만! 계속 npm start
로 하는 것보다 static한 빌드된 파일을 가벼운 서버에서 돌리기 위해 nginx를 사용하게 됐다.
우선 빌드된 파일을 Nginx에 올리기 위해 클라이언트 폴더에서 빌드를 해줬다.
apt-get install nginx
이제 nginx를 설치하고 nginx 설정을 위한 스크립트를 작성한다.
sudo vi /etc/nginx/sites-enabled/default
이미 기본으로 작성된 스크립트들이 있을텐데 나는 그냥 지우고 필요한 사항만 작성해줬다.
server {
listen 80;
location / {
root /github_repository/client/build; # 빌드된 파일이 있는 경로
index index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://[SERVER_URL];
}
}
listen [port]
location /[route]
try_files
proxy_pass
forward proxy
reverse proxy
스크립트 작성하고 실행하기만 하면 끝이다.
sudo service nginx start
처음부터 오류가 떴다.
403 forbidden으로 권한이 없다고 떠서 보니까 index.html에 execute 권한이 없었다.
실행하고자하는 빌드 파일까지의 경로가 모두 execute 권한이 있어야 한다고 해서 권한을 부여해주니까 해결!
listen으로 80 포트를 열어두고, netstat으로 80 port 열린 것도 확인했는데 도저히 접속이 안 됐다.
이거가지고 진짜 하루종일 헤맸는데
다음날 아침에 일어나서 보니까,,,
ACG에서 port 설정을 안 해뒀었다.
😇
설정해주니까 해결,,,
nginx로 배포하고 개발하는 과정에서 github에서 업데이트된 파일 pull받고, Nginx에 빌드파일 올리고, nginx restart하는 과정이 매우 번거로웠다. 그래서 github actions를 사용해서 자동화를 하기로 했다.
runs-on
으로 실행 환경을 지정run
속성을 사용, 액션을 사용할 때는 uses
속성을 사용ssh로 원격 접속을 하고 command를 입력해야했다. ssh-action을 사용해서 간단하게 작성이 가능했다.
name: React build
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-18.04
steps:
- name: SSH-deploy
uses: appleboy/ssh-action@master
with:
host: ${{ secrets.REMOTE_IP }} # ssh 접속용 ip
username: ${{ secrets.REMOTE_SSH_ID }} # root
password: ${{ secrets.REMOTE_SSH_KEY }} # ssh 접속용 password
port: ${{ secrets.REMOTE_SSH_PORT }} # ssh 접속용 port
script: |
sh deploy.sh
# deploy.sh
cd /repository
git pull origin main
cd /client
yarn build
sudo service nginx restart
main 브랜치로 push가 되면 서버에 작성해놓은 deploy.sh
가 실행되도록 하는 코드이다. secrets는 setting에서 설정해줄 수 있다.
그런데 이렇게 작성하면 오류가 난다.
왜,,,🥹
알고보니 github action에서 ubuntu 18.04 버전이 decrecated되었다고 한다.
그래서 16.04 버전으로 바꿔주니 성공했다ㅎㅎ
참고자료
https://bcp0109.tistory.com/m/194
https://kaizen8501.tistory.com/m/260