[React] Movie app clone coding : Building for production

3 minute read
, , ,

8-1. Building for production

Github pages

static file을 올릴 수 있는 서비스.

static file은 자바스크립트, css, html과 같은 frontend 파일을 의미한다 (backend는 안됨).

Github page는 이러한 static file을 무료로 호스팅할 수 있게 해준다.

필요한 것 세가지

  1. Github 계정
  2. Github Project
  3. Github Project의 branch : 이름은 gh-pages로 해야 한다.

Build

  1. yarn build : CSS를 가져다가 압축한다. 로컬호스트에 있을 때 사용하는 코드는 압축되어 있지 않고, 느리고 최적화되어 있지 않다. build 작업을 하면 좀더 최적화 되고, 압축, 향상되는 것이다.
  1. package.json 으로 가서 key 를 추가한다.
1{
2  ...
3  "homepage" : "http://lovesignal.github.io/movie_list"
4}
  1. 다시 yarn build 를 실행하면 아래와 같은 메시지가 출력된다.
 1yarn run v1.7.0
 2$ react-scripts build
 3Creating an optimized production build...
 4Compiled successfully.
 5
 6File sizes after gzip:
 7
 8  41.38 KB  build/static/js/main.5302de1f.js
 9  771 B     build/static/css/main.6c472154.css
10
11The project was built assuming it is hosted at /movie_list/.
12You can control this with the homepage field in your package.json.
13
14The build folder is ready to be deployed.
15To publish it at http://lovesignal.github.io/movie_list, run:
16
17  yarn add --dev gh-pages
18
19Add the following script in your package.json.
20
21    // ...
22    "scripts": {
23      // ...
24      "predeploy": "npm run build",
25      "deploy": "gh-pages -d build"
26    }
27
28Then run:
29
30  yarn run deploy
31
32Find out more about deployment here:
33
34  http://bit.ly/2vY88Kr
35
36✨  Done in 5.02s.
  1. yarn add --dev gh-pages 를 실행한다.
 1yarn add v1.7.0
 2[1/4] 🔍  Resolving packages...
 3⠂ gh-pages(node:1659) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
 4[2/4] 🚚  Fetching packages...
 5[3/4] 🔗  Linking dependencies...
 6[4/4] 📃  Building fresh packages...
 7success Saved lockfile.
 8success Saved 8 new dependencies.
 9info Direct dependencies
10└─ gh-pages@1.2.0
11info All dependencies
12├─ filename-reserved-regex@1.0.0
13├─ filenamify-url@1.0.0
14├─ filenamify@1.2.1
15├─ gh-pages@1.2.0
16├─ humanize-url@1.0.1
17├─ strip-outer@1.0.1
18├─ strip-url-auth@1.0.1
19└─ trim-repeated@1.0.0
20✨  Done in 4.24s.
  1. 그리고 아래 코드를 packages.json 의 scripts 에 추가한다.
1    "scripts": {
2      // ...
3      "predeploy": "npm run build",
4      "deploy": "gh-pages -d build"
5    }
  1. 아래 명령어 실행
1npm run build
2yarn run deploy

적용되는데 5분 정도 걸린다.