Nginx 설치 및 리액트 결과물 배포 과정
1. 웹서버 설치를 위해 root 권한 부여
sudo -i2. Nginx 설치
sudo apt update
sudo apt install nginx3. Nginx 자동 시작 설정 & 상태 확인
sudo systemctl enable nginx
Synchronizing state of nginx.service with SysV service script with /usr/lib/systemd/systemd-sysv-install.
Executing: /usr/lib/systemd/systemd-sysv-install enable nginx
sudo systemctl status nginx(✓) 여기까지 Nginx가 문제 없이 설치 되었다면 아래와 같은 active status를 확인할 수 있다.
4. 방화벽 설정
4.1 방화벽이란?
미리 정의된 보안 규칙에 따라, 들어오고 나가는 네트워크 트래픽을 모니터링하는 네트워크 보안 시스템4.2 Ubuntu에서 기본적으로 제공하는 방화벽은 UFW (Uncomplicated Firewall) 이다.
4.3 프로필이라는 미리 정의된 방화벽 규칙 세트를 통해 방화벽을 간단하게 설정할 수 있다.
/*
Nginx Full:
Nginx 웹 서버의 HTTP 및 HTTPS 트래픽을 허용하는 프로필
*/
sudo ufw allow 'Nginx Full'
➜ Rules updated (v6)
// 위에서 설정된 UFW 관련 방화벽 규칙에 대한 적용이 시작됨
sudo ufw enable
// 현재 설정된 방화벽 규칙 확인
sudo ufw status5. 웹페이지 접속을 위한 서버 방화벽 정책 추가
외부에서 web01의 80번 포트에 대해 허용하는 정책을 추가
- Servers > Networking으로 이동
- 방화벽 설정 클릭
- 아래와 같이 설정한 후 추가를 완료
외부에서의 접근이므로 external → DMZ 및 공인 IP로 설정해준다.
6. http://공인ip주소:포트번호 로 액세스한 후 nginx 동작 확인
7. react의 결과물 배포준비
7.1 배포
현재까지의 결과물을 배포하기 위해 아래의 명령어를 통해 빌드한다.
일반적으로 package.json의 scripts에 배포를 위한 커맨드가 구성되어 있는데, 개발 혹은 상용환경에 따라 커맨드가 약간씩 다를 수 있어서 실행전 사전 확인이 필요하다.
$ yarn build7.2 dist 디렉토리 확인
앱 루트 디렉토리 레벨에 dist 디렉토리가 생성되고 위의 정적 에셋과 파일들이 dist 내부에 생성된 것을 확인
8. Nginx conf 설정
- root: 빌드한 파일들이 있는 디렉토리 경로
- index: 경로안에 index.html 이 있는지 꼭 확인한다.
- servername: ``으로 하면 모든 요청을 받게 되지만, 한 서버 내에서 여러 웹 서버를 돌리는 경우 등에 대응하기 위해 추후 공인 IP로 변경 예정
server {
listen 80 default_server;
listen [::]:80 default_server;
# SSL configuration
#
# listen 443 ssl default_server;
# listen [::]:443 ssl default_server;
#
# Read up on ssl_ciphers to ensure a secure configuration.
# See: https://bugs.debian.org/765782
#
# Self signed certs generated by the ssl-cert package
# Don't use them in a production server!
#
# include snippets/snakeoil.conf;
root /home/ubuntu/RepositoryName;
index index.html;
server_name _;
# 루트 URL 요청 시 리다이렉션
location / {
try_files $uri $uri/ /index.html;
}
}9. Nginx에 serving
8.1 로컬환경의 build 파일을 nginx의 빌드 디렉토리로 전송
맥을 사용하며 비교적 터미널에 익숙한 나는 scp 명령어를 통해 빌드파일이 들어있는 build/ 디렉토리 하위의 모든 파일을 서버의 특정 디렉토리로 전송해줬다. 작업하는 개인의 스타일에 따라서 터미널을 거치지 않고 ssh 인증을 통한 파일 전송 프로그램을 사용해도 된다.
sudo chmod -R 755 /home/ubuntu/DigitalTwin_Air/assets/
sudo chown -R ubuntu:ubuntu /home/ubuntu/DigitalTwin_Air/*
scp -i ./ssh-key.pem -P portNumber -r build/* userName@PublicIPAddress:/home/ubuntu/RepositoryName/
여기까지 완료 후 다시 공인IP로 액세스하여 화면이 바르게 반영되었는지 확인하면 프론트 쪽은 끝-
10. Nginx 트러블 슈팅
Nginx 서빙까지 마치고 페이지를 요청하여 접속했을 때 화면이 올바르게 나타나지 않는 경우, 아래와 같이 체크해나가다보면 거의 90% 해결이 가능했다.
- 403 Forbidden
- 404 Not found
- 기본 설정 Nginx 화면이 표시됨
10.1 빌드 디렉토리의 권한 확인
Nginx는 웹 서버로, 특정 디렉토리 및 파일에 대해 읽기 권한이 있어야 파일을 제공할 수 있다. 빌드된 디렉토리와 그 안의 파일들에 대해 Nginx가 읽기 권한을 가지고 있는지 확인한다.
sudo chown -R www-data:www-data /home/ubuntu/RepositoryName
sudo chmod -R 755 /home/ubuntu/RepositoryName
sudo chmod 755 /home/ubuntu
sudo chmod 755 /home/ubuntu/RepositoryName10.2 루트 확인
nginx root 설정에서 빌드된 디렉토리의 경로가 맞는지 확인
ubuntu 서버로 구축한 나의 경우에는 설정파일은 아래에 위치해 있었음
- /etc/nginx/sites-available/default
server {
listen 80 default_server;
listen [::]:80 default_server;
...
root /home/ubuntu/RepositoryName; # 웹 파일이 있는 경로
...
location / {
try_files $uri $uri/ =404;
}
}10.3 심볼릭 링크 확인
설정 파일이 sites-enabled 디렉토리로 심볼릭 링크되어 있는지 확인
심볼릭 링크가 연결된 경우에는, 결과에 아래처럼 경로가 표시됨
$ ls -l /etc/nginx/sites-enabled/
total 0
lrwxrwxrwx 1 root root 34 Sep 26 11:08 default -> /etc/nginx/sites-available/default심볼릭 링크가 연결되지 않은 경우에는 아래 커맨드 실행하여 연결
$ sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled/10.4 위 처럼 default 파일에 서버 설정을 작성한 경우에는 nginx.conf에 해당 설정이 인클루드 되어 있는지 확인한다.
$ sudo vi /etc/nginx/nginx.conf
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
...
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}
