Deploy React App

SPA 프로젝트 배포 이해하기

serve 패키지로 React Wep App 배포하기

AWS S3 에 React Wep App 배포하기

node.js express 로 React Wep App 배포하기

NginX 로 React Wep App 배포하기

서버사이드 렌더링 이해하기

Lead Software Engineer @ProtoPie

Microsoft MVP

TypeScript Korea User Group Organizer

Marktube (Youtube)

Mark Lee

이 웅재

SPA 프로젝트 배포 이해하기

SPA Deploy

git clone https://github.com/xid-mark/tic-tac-toe.git

cd tic-tac-toe

npm ci

npm run build

npm run build (in create-react-app Project)

npm run build
- production 모드로 빌드되어, 'build' 폴더에 파일 생성
  - 이렇게 만들어진 파일들을 웹서버를 통해 사용자가 접근할 수 있도록 처리
- build/static 폴더 안에 JS, CSS 파일들이 생성
  - 파일 이름에 hash 값이 붙는다.
    - long term caching techniques
    - ex) main.eb74f3d0.chunk.css

{Project} 폴더 바로 아래

build 라는 폴더가 만들어지고,

그 안에 Production 배포를 위한

파일들이 생성됩니다.

SPA Deploy 의 특징

모든 요청을 서버에 하고 받아오는 형태가 아님
라우팅 경로에 상관없이 리액트 앱을 받아 실행
라우팅은 받아온 리액트 앱을 실행 후, 적용
static 파일을 제외한 모든 요청을 index.html 로 응답해 주도록 작업

serve -s build
- https://github.com/zeit/serve
AWS S3 에 배포
node.js express
NginX

serve 패키지로

React Wep App 배포하기

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

npm install serve -g
serve -s build

AWS S3 에

React Wep App 배포하기

Amazon S3 정적 웹 사이트 호스팅

버킷 생성

정적 웹사이트 호스팅 설정

퍼블릭 액세스 차단 해제

버킷 정책 설정

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

build => s3

s3 static webhosting endpoint

node.js express 로

React Wep App 배포하기

npm i express

tic-tac-toe/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);

node server.js - http://127.0.0.1:9000

NginX 로

React Wep App 배포하기

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/tic-tac-toe/build;
    index  index.html;

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

ec2 endpoint

서버사이드 렌더링 이해하기

Server Side Rendering

서버에서 응답을 가져올때, 기존 처럼 static file 만을 가져오는 것이 아니고, 먼저 서버에서 응답 값을 만들어서 내려주고, 그 후에 static file 을 내려줍니다.
static file 을 다 내려받고, 리액트 앱을 브라우저에서 실행한 뒤에는 SPA 처럼 동작하게 됩니다.

React Server Side Rendering

React Component 를 브라우저가 아니라 Node.js 에서 사용
ReactDOMServer.renderToString(<App />);
- 결과가 문자열
- 이것을 응답으로 내려준다.
라우팅, 리덕스 와 같은 처리를 서버에서 진행하고 내려준다.
- 복잡, 어렵
JSX 가 포함된 리액트 코드를 서버에서 읽을 수 있도록 babel 설정을 해야 한다.

Deploy React App

Mark Lee

SPA 프로젝트 배포 이해하기

SPA Deploy

npm run build (in create-react-app Project)

npm run build

production 모드로 빌드되어, 'build' 폴더에 파일 생성

​이렇게 만들어진 파일들을 웹서버를 통해 사용자가 접근할 수 있도록 처리​

build/static 폴더 안에 JS, CSS 파일들이 생성

파일 이름에 hash 값이 붙는다.

​long term caching techniques

​ex) main.eb74f3d0.chunk.css

{Project} 폴더 바로 아래

build 라는 폴더가 만들어지고,

그 안에 Production 배포를 위한

파일들이 생성됩니다.

SPA Deploy 의 특징

모든 요청을 서버에 하고 받아오는 형태가 아님

라우팅 경로에 상관없이 리액트 앱을 받아 실행

라우팅은 받아온 리액트 앱을 실행 후, 적용

static 파일을 제외한 모든 요청을 index.html 로 응답해 주도록 작업

serve -s build

https://github.com/zeit/serve

AWS S3 에 배포

node.js express

NginX

serve 패키지로

React Wep App 배포하기

serve 라는 패키지를 전역으로 설치합니다.

serve 명령어를 -s 옵션으로 build 폴더를 지정하여 실행합니다.

AWS S3 에

React Wep App 배포하기

Amazon S3 정적 웹 사이트 호스팅

버킷 생성

정적 웹사이트 호스팅 설정

퍼블릭 액세스 차단 해제

버킷 정책 설정

버킷 정책 설정

build => s3

s3 static webhosting endpoint

node.js express 로

React Wep App 배포하기

tic-tac-toe/server.js

node server.js - http://127.0.0.1:9000

NginX 로

React Wep App 배포하기

Ubuntu 에 NginX 최신 버전 설치하기

NginX 설치 완료

sudo service nginx start

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

ec2 endpoint

서버사이드 렌더링 이해하기

Server Side Rendering

서버에서 응답을 가져올때, 기존 처럼 static file 만을 가져오는 것이 아니고, 먼저 서버에서 응답 값을 만들어서 내려주고, 그 후에 static file 을 내려줍니다.​

static file 을 다 내려받고, 리액트 앱을 브라우저에서 실행한 뒤에는 SPA 처럼 동작하게 됩니다.

React Server Side Rendering

React Component 를 브라우저가 아니라 Node.js 에서 사용

ReactDOMServer.renderToString(<App />);

결과가 문자열

이것을 응답으로 내려준다.

라우팅, 리덕스 와 같은 처리를 서버에서 진행하고 내려준다.

복잡, 어렵

​JSX 가 포함된 리액트 코드를 서버에서 읽을 수 있도록 babel 설정을 해야 한다.

이렇게 만들어진 파일들을 웹서버를 통해 사용자가 접근할 수 있도록 처리

long term caching techniques

ex) main.eb74f3d0.chunk.css

서버에서 응답을 가져올때, 기존 처럼 static file 만을 가져오는 것이 아니고, 먼저 서버에서 응답 값을 만들어서 내려주고, 그 후에 static file 을 내려줍니다.

JSX 가 포함된 리액트 코드를 서버에서 읽을 수 있도록 babel 설정을 해야 한다.