[AWS] Lightsail + nginx React 배포하기 - 4

이한형·2021년 10월 25일
1

git으로 소스코드 가져오기

$ git clone https://github.com/hanhyung6376/calendar.git

자신의 소스코드를 github에서 서버로 옮겨줍니다.

Nginx Config 수정

그리고 Nginx의 설정을 변경해줘야합니다.

$ cd /etc/nginx

nginx가 있는 디렉토리로 이동을 하고나서

    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*.conf;

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
        location = /404.html {

server의 윗 부분에 include /etc/nginx/sites-enabled/*.conf; 내용을 추가해줍니다.

$ mkdir sites-available
$ mkdir sites-enabled
$ vi /etc/nginx/sites-available/~~~~~.conf

sites-available, sites-enabled 폴더를 만들고 sites-available 폴더안에 conf 파일을 생성해줍니다.

server {
    listen 80;
    server_name myproejct.com www.myproejct.com ; ##도메인 변경
	
    add_header Access-Control-Allow-Origin *;
    add_header "X-UA-Compatible" "IE=Edge,chrome=1";
    root   /home/centos/collabo/client; ##앱 디렉토리 변경
	
    index  index.html index.htm;
    client_body_buffer_size 2048M;
    client_max_body_size 2048M;

    location /libraries {
        try_files $uri $uri/ /index.html;
    }

    location /assets {
        try_files $uri $uri/ /index.html;
    }

    return 301 https://myproejct.com/$request_uri; ## 도메인 변경
}

server {
    #listen 443 ssl;
    listen 443 ssl http2;
    listen [::]:443 ssl http2;


    server_name myproejct.com; ##도메인 변경
	
   #add_header Access-Control-Allow-Origin *;
    add_header "X-UA-Compatible" "IE=Edge,chrome=1";
    root   /home/centos/collabo/client;
    index  index.html index.htm;
    
    ssl on;
	ssl_certificate        /etc/letsencrypt/live/myproejct.com/fullchain.pem; ##SSL 변경필요
    ssl_certificate_key    /etc/letsencrypt/live/myproejct.com/privkey.pem; ##SSL 변경필요



    client_body_buffer_size 2048M;
    client_max_body_size 2048M;


    location /libraries {
      try_files $uri $uri/ /index.html;
    }

     location /videos {
          try_files $uri $uri/ /index.html;
        }

    location /assets {
      try_files $uri $uri/ /index.html;
    }

    location / {
      root   /home/centos/collabo/client/build; ##앱 디렉토리 변경

      index  index.html index.htm;
      try_files $uri $uri/ /index.html;
    } 
    location /api/ {
        proxy_pass http://localhost:4000; ## api 서버
        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;
    }
}

주석 부분을 수정한 내용을 conf파일에 작성해주세요. 다 작성을 하고나서

$ ln -s /etc/nginx/sites-available/~~~~~.conf /etc/nginx/sites-enabled/~~~~~.conf
$ nginx -t

명령어를 실행하고 다음과 같이 나온다면 정상적으로 설정이 됐습니다!

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

이제 Nginx를 다시 동작시키고 자신의 도메인으로 들어가시면 프로젝트가 나올거에요!

$ systemctl start nginx

만약 Internal Server Error가 발생한다면

$ chmod 711 /home/centos

자신의 프로젝트가 있는 디렉터리의 권한을 711로 변경하시고 nginx를 다시 시작해보세요!

profile
풀스택 개발자를 지향하는 개발자

0개의 댓글