React Wep App 배포하기

완성된 프로젝트 폴더 안에서
npm ci
:개발자들이 개발환경을 (pakcage에 대한) 지속적으로 통합할 수 있도록 하는 커맨드.
npm run build
: production 모드로 빌드, build 폴더 안에 배포에 필요한 파일들이 만들어진다. build/static 폴더 안에 JS, CSS 파일들이 생성

<serve 패키지로>

npm install serve -g
serve 라는 패키지를 전역으로 설치합니다.
serve -s build
serve 명령어를 -s 옵션으로 build 폴더를 지정하여 실행합니다.
​-s 옵션은 어떤 라우팅으로 요청해도 index.html 을 응답하도록 합니다.

< AWS S3>

1. Amazon S3 정적 웹 사이트 호스팅
   https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/creating-bucket.html 를 참고해 s3버킷 생성. 버킷의 이름은 unique해야 한다.
2. 해당 버킷에 build 파일 업로드
   파일업로드> build폴더 안에 있는 모든 파일
   폴더추가> build폴더 안에 있는 static 폴더
3. 속성>정적웹사이트 호스팅> 인덱스 문서와 오류 문서 html파일을 지정해 주고 저장하면 밑에 주소가 생성된다.
4. 해당 주소는 private하기 때문에 public으로 변경해야 한다.
   4-1. 권한>퍼블릭 엑세스 차단> 모든 퍼블릭 엑세스 차단 ☑️ 풀기
   4-2. 버킷 정책> 편집> 정책을 아래와 같이 바꾸고 저장

   {
    "Version": "2012-10-17",
    "Statement": [
      {
        "Sid": "PublicReadGetObject",
        "Effect": "Allow",
        "Principal": "*",
        "Action": [
          "s3:GetObject"
        ],
        "Resource": [
          "arn:aws:s3:::내프로젝트이름/*"
        ]
      }
    ]
   }

   *https는 쓸 수 없음.

< NginX >

1. AWS EC2 데쉬보드에서 순차적으로 따라하기.
   인스턴스> 인스턴스 시작>맞는서버 고르기(우분투)>단계6으로 넘어가 http 추가, 보안그룹 이름 변경>새 키 페어 생성 키페어 이름 입력>키페어 다운로드 버튼 클릭> 인스턴스 시작버튼 클릭
   
   
2. 인스턴스 상태가 실행중으로 바뀜 확인 후 퍼블릭 주소를 복사 후 터미널에 다음과 같이 입력.(우분투가 아닐 수 있음)

   chmod 400 다운받은키페어.pem// 권한 변경
   ssh ubuntu@복사한주소 -i 다운받은키페어.pem
   yes

3. Ubuntu 에 NginX 최신 버전 설치하기
   ->git clone 레파지토리깃주소
   ->cd 레파지토리로 이동
   https://github.com/nvm-sh/nvm 따라 Verify Installation까지 진행
   참고) https://gist.github.com/falsy/8aa42ae311a9adb50e2ca7d8702c9af1
   ->exit 명령어로 종료했다가 위 ssh 명령어를 다시 실행.

   cd 레파지토리로 이동
   nvm use // 설치가 안되어 있으면 nvm install
   npm ci
   npm run build
   sudo apt-get update
   sudo apt-get upgrade 
   wget http://nginx.org/keys/nginx_signing.key
   sudo apt-key add nginx_signing.key
   sudo rm -rf nginx_signing.key
   sudo nano /etc/apt/sources.list
   //sources.list파일에 밑에 deb 코드 추가
   	deb http://nginx.org/packages/mainline/ubuntu/ trusty nginx
   	deb-src http://nginx.org/packages/mainline/ubuntu/ trusty nginx
   sudo apt-get update
   sudo apt-get upgrade
   sudo apt-get install nginx
   y
   nginx -v

   여기까지 진행 후 EC2 시트의 퍼블릭 주소로 들어가면 nginx 인트로 화면이 나온다.
4. 프로젝트와 연결

   sudo rm -rr /etc/nginx/sites-available/default
   sudo nano /etc/nginx/sites-available/default 
   //밑 코드를 복사 붙여넣기
   server {
     listen       80;
     server_name  localhost;
     root   /home/ubuntu/tic-tac-toe/build;
     index  index.html;
     location / {
         try_files $uri $uri/ /index.html;
     }
   }
   sudo service nginx restart

   listen 포트번호
   root가 빌드된 폴더 위치.

< Node.js express >

레파지토리 폴더에서 아래 커멘드 입력
npm i express
vs code 열어 server.js 파일 생성

const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
// app.get('/', function(req, res) {
app.get('*', function(req, res) {
 res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(9000);//포트넘버 넣기