SPA Deploy with TypeScript

2woongjae@gmail.com

Mark Lee (이웅재)

• Studio XID inc. ProtoPie Engineer
• Seoul.JS 오거나이저
• 타입스크립트 한국 유저 그룹 오거나이저
• 일렉트론 한국 유저 그룹 운영진
• Seoul.js 오거나이저
• Microsoft MVP - Visual Studio and Development Technologies
• Code Busking with Jimmy
  • https://www.youtube.com/channel/UCrKE8ihOKHxYHBzI0Ys-Oow

SPA Deploy 개요

create-react-app  SPA Build

• Single Page Application
• npm run build
  • production 모드로 빌드되어, 'build' 파일에 생성
    • service worker 가 디폴트
  • 이렇게 만들어진 파일들을 웹서버를 통해 사용자가 접근할 수 있도록 처리

npm run build

build 폴더

http://localhost:5000

• serve -s dist
  • https://github.com/zeit/serve
• AWS S3 에 배포
• express
• nginx

Amazon S3 정적 웹 사이트 호스팅

버킷 생성

버킷 정책 설정

{
  "Version":"2012-10-17",
  "Statement":[{
	"Sid":"PublicReadGetObject",
        "Effect":"Allow",
	  "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::react-ts-deploy/*"
      ]
    }
  ]
}

버킷 정책 설정

정적 웹사이트 호스팅 설정

build => s3

s3 static webhosting endpoint

• https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/dev/WebsiteHosting.html
• https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/dev/WebsiteAccessPermissionsReqd.html
• https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af

node.js express

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);

package.json

{
  "name": "react-ts-deploy",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "express": "^4.16.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts-ts": "2.13.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject",
    "deploy": "node server.js"
  },
  "devDependencies": {
    "@types/jest": "^22.1.1",
    "@types/node": "^9.4.0",
    "@types/react": "^16.0.36",
    "@types/react-dom": "^16.0.3",
    "typescript": "^2.7.1"
  }
}

npm run deploy

http://127.0.0.1:9000

NginX

Ubuntu 에 NginX 최신 버전 설치하기

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

```
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
nginx -v

NginX 설치 완료

sudo service nginx start

/etc/nginx/conf.d/default.conf

server {
    listen       80;
    server_name  localhost;

    root   /home/ubuntu/build;
    index  index.html;

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

ec2 endpoint