nginx 설치 및 React 배포

• nginx 설치

sudo apt-get install nginx -y

• nginx 웹 서버 실행 (start)

sudo systemctl enable nginx

• 상태확인

sudo systemctl status nginx

• cd /etc/nginx/sites-available 경로로 이동하여 아래의 명령어 실행

sudo cp default myserver

sudo vim myserver

• myserver 파일이 열리면 :%d 로 모든 정보를 지우고 아래의 내용을 붙여넣기(ctrl+shift+v)
  • insert 모드(i)를 켜고 root와 server_name 부분을 자신의 정보로 수정
  • root : react build 폴더 위치의 경로 (pwd)
  • server_name : 인스턴스 퍼플릭 IP 주소

server {
        listen 80;
        listen [::]:80;
        root /home/azureuser/apps/my-notes-app/client/build;
        index index.html index.htm index.nginx-debian.html;
        server_name 20.51.228.239;
        location / {
                    try_files $uri /index.html;
                   }
        location /api {
            proxy_pass http://localhost:3001;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
           }
}

• 심볼릭 링크 생성
• ln -s <TARGET> <LINK_NAME>
• /etc/nginx/sites-available/myserver 파일에 대한 심볼릭 링크로 /etc/nginx/sites-enabled/ 를 생성

sudo ln -s /etc/nginx/sites-available/myserver /etc/nginx/sites-enabled/

💡 Linux Symbolic Link
링크를 연결하여 원본 파일을 직접 사용하는 것과 같은 효과를 내는 링크, 윈도우의 바로가기와 비슷한 개념.
심볼릭 링크를 설정하면 새로 만들어진 파일과 원본 파일간의 삭제, 수정 등록 등이 모두 공유됨 ex) copy 파일 수정하면 원본 파일도 수정됨

• 웹 서버 재시작(restart)

sudo service nginx restart