먼저 aws에 들어가서 배포할 두개의 프로젝트를 git clone 받는다.
nginx를 설치 하자.
$ sudo apt-get install nginx
nginx 를 설치확인하고 nginx 의 폴더 위치는 /etc 에 있다.
그 안에 있는 설정 파일에 들어가자.
cd /etc/nginx/site-available
먼저 기존에 있던 default 파일을 지우고 새로 default 파일을 만들어서 내용을 작성하자.
rm -rf default
sudo vi default
파일에 들어가서 i 를 누르면 작성 모드로 변하게 된다. 안에 내용을 채워보자.
server {
listen 80;
location / {
root /home/ubuntu/mini/build;
index index.html index.htm;
try_files $uri /index.html;
}
}listen 80은 80번 포트 일때
location / url / 일때 다음과 같은 내용을 가져온다는 것이다.
root 내가 가져올 build 된 파일의 경로를 적어준다.
밑에 내용을 어떤 파일을 읽을지에 대한 설정이다.
react 는 build 파일에 html 파일을 읽으면 된다.
작성 완료 후
:wq!
파일에 에러가 없는지 확인하기
sudo nginx -t
이제 nginx를 실행 시켜보자.
sudo systemctl start nginx
nginx 를 실행 시킨 후 배포된 ip 로 가게되면 이렇게 nginx 가 작동준인걸 알 수 있다.
이제 프로젝트에 가서 build드 파일을 만들어 주면 된다.
cd ~
npm install 을 하고 build 를 하자.
build 파일이 생성된걸 확인하고 배포된 ip로 가보자.
이렇게 배포가 된건을 알 수있다 .
이번에는 두번째 프로젝트를 /test 하면 접속 할 수있게 배포 해보자
server {
listen 80;
location / {
root /home/ubuntu/mini/build;
index index.html index.htm;
try_files $uri /index.html;
}
location /test {
alias /home/ubuntu/mini2/build;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
이렇게 까지만 작성하면 화면이 나오지 않을것이다.
그 이유는 개발자도구를 열어서 찾아 보자.
경로를 보게되면 /test 가 아닌 기존 url 에 요청을 보내는 것을 볼 수있다 .
이경로를 바꿔주어야 한다.
빌드된 파일에 들어가서 일일히 바꿔 줄 수도 있지만 개발자 답게 간편하게 수정해 보자.
nginx 에는 sub_filter 라는 기능을 제공한다. 이 기능으로 경로를 수정해 보자.
location /test {
sub_filter_types text/xml text/css text/javascript;
sub_filter static/js/ test/static/js/;
sub_filter href="/favicon href="test/favicon;
sub_filter static/css/ test/static/css/;
sub_filter static/media/ test/static/media/;
sub_filter manifest.json/ test/manifest.json/;
sub_filter_once off;
sub_filter_types *;
alias /home/ubuntu/mini2/build;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}:wq!
sudo nginx -t
sudo syatemctl restart nginx
이렇게 파일을 수정 하고 재시작 하면 경로가 /test로 변경 된걸 확인 할 수 있다.
이렇게 한 url 에 두개의 프로젝트를 배포 해 보았다.