Post List

2016년 10월 19일 수요일

Walmart Electrode 앱을 배포해보기 #04

배포는 Heroku를 이용해보기로 한다.

Heroku는 클라우드 플랫폼(PaaS)을 제공하고 개발자는 무료로 한개의 웹 서버를 기동할 수 있다.

이번 일렉트로드 앱을 github를 통하여 Heroku에 배포하는 방법이다.

그래서 git 이 설치되었다고 가정하고 진행한다.



Electrode가 설치된 디렉토리로 이동한 후 git을 이용해 본다.

1. 디렉토리 확인

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[binrang@localhost ex-electrode-app]$ ls -al
합계 96
drwxrwxr-x.   8 binrang binrang  4096 10월 18 16:48 .
drwx------.  20 binrang binrang  4096 10월 19 10:31 ..
-rw-r--r--.   1 binrang binrang    86 10월 18 11:42 .babelrc
-rw-r--r--.   1 binrang binrang   171 10월 18 11:42 .editorconfig
drwxrwxr-x.   2 binrang binrang    46 10월 18 11:54 .etmp
-rw-r--r--.   1 binrang binrang    12 10월 18 11:42 .gitattributes
-rw-r--r--.   1 binrang binrang  2559 10월 18 11:42 .gitignore
-rw-rw-r--.   1 binrang binrang   651 10월 18 16:48 .isomorphic-loader-config.json
-rw-rw-r--.   1 binrang binrang    70 10월 18 11:42 .travis.yml
-rw-r--r--.   1 binrang binrang   578 10월 18 11:42 LICENSE
-rw-r--r--.   1 binrang binrang   783 10월 18 11:42 README.md
drwxrwxr-x.   6 binrang binrang    96 10월 18 11:42 client
drwxrwxr-x.   2 binrang binrang    90 10월 18 11:42 config
-rw-r--r--.   1 binrang binrang    44 10월 18 11:42 gulpfile.js
drwxrwxr-x. 969 binrang binrang 28672 10월 18 11:52 node_modules
-rw-rw-r--.   1 binrang binrang  1170 10월 18 11:42 package.json
drwxrwxr-x.   4 binrang binrang    47 10월 18 11:42 server
drwxrwxr-x.   3 binrang binrang    19 10월 18 11:42 test
[binrang@localhost ex-electrode-app]$ 

2. git 을 이용하여 github에 올려보자.

1
2
3
[binrang@localhost ex-electrode-app]$ git init
Initialized empty Git repository in /home/binrang/ex-electrode-app/.git/
[binrang@localhost ex-electrode-app]$ 

1
2
3
4
[binrang@localhost ex-electrode-app]$ git add .
warning: CRLF will be replaced by LF in LICENSE.
The file will have its original line endings in your working directory.
[binrang@localhost ex-electrode-app]$ 

어? 뭔가 워닝이....
대충 보니 CR(Carriage-Return)과 LF(Line Feed)등을 혼용하는 Window이지만, Linux나 Mac은 LF만 사용하는데 저 LICENSE 파일에 이 부분이 문제가 생긴것이다.

해결방법은 아래와 같이 Config 설정을 변경하여 해결한다.

1
2
[binrang@localhost ex-electrode-app]$ git config core.safecrlf false
[binrang@localhost ex-electrode-app]$ 

1
2
[binrang@localhost ex-electrode-app]$ git add .
[binrang@localhost ex-electrode-app]$ 

경고 메시지가 사라졌다...ㅎㅎㅎ

이제 git을 commit 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
[binrang@localhost ex-electrode-app]$ git commit -m 'first commit'
[master (root-commit) bfd69fc] first commit
 Committer: binrang <binrang@localhost.localdomain>
Your name and email address were configured automatically based
on your username and hostname. Please check that they are accurate.
You can suppress this message by setting them explicitly:
    git config --global user.name "Your Name"
    git config --global user.email you@example.com
After doing this, you may fix the identity used for this commit with:
    git commit --amend --reset-author
 25 files changed, 883 insertions(+)
 create mode 100644 .babelrc
 create mode 100644 .editorconfig
 create mode 100644 .gitattributes
 create mode 100644 .gitignore
 create mode 100644 .travis.yml
 create mode 100644 LICENSE
 create mode 100644 README.md
 create mode 100644 client/actions/index.jsx
 create mode 100644 client/app.jsx
 create mode 100644 client/components/home.jsx
 create mode 100644 client/components/home.jsx.bak
 create mode 100644 client/reducers/index.jsx
 create mode 100644 client/routes.jsx
 create mode 100644 client/styles/base.css
 create mode 100644 config/default.json
 create mode 100644 config/development.json
 create mode 100644 config/production.js
 create mode 100644 config/production.json
 create mode 100644 gulpfile.js
 create mode 100644 package.json
 create mode 100644 server/index.js
 create mode 100644 server/plugins/webapp/index.html
 create mode 100644 server/plugins/webapp/index.js
 create mode 100644 server/views/index-view.js
 create mode 100644 test/client/components/home.spec.jsx
[binrang@localhost ex-electrode-app]$ 

원격저장소를 연결한다.
1
2
[binrang@localhost ex-electrode-app]$ git remote add origin https://github.com/binrang/ex-electrode-app.git
[binrang@localhost ex-electrode-app]$ 


이제 Push를 해 볼까...

1
2
3
4
5
6
[binrang@localhost ex-electrode-app]$ git push -u origin master
Username for 'https://github.com': binrang
Password for 'https://binrang@github.com': 
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/binrang/ex-electrode-app.git/'
[binrang@localhost ex-electrode-app]$ 


에혀.. 또 에러다... 이유는 간단하지.. 계정이 틀렸다고 그런거지.. 아! 그러고보니
Github에 저 눔의 저장소를 안만들었다... 어여 만들고 다시 시작하자.

Github로 가서 저장소 만들자....
저장소를 만들었다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[binrang@localhost ex-electrode-app]$ git push -u origin master
Username for 'https://github.com': binrang
Password for 'https://binrang@github.com': 
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/binrang/ex-electrode-app.git/'
[binrang@localhost ex-electrode-app]$ git push -u origin master
Username for 'https://github.com': binrang
Password for 'https://binrang@github.com': 
remote: Invalid username or password.
fatal: Authentication failed for 'https://github.com/binrang/ex-electrode-app.git/'
[binrang@localhost ex-electrode-app]$ git push -u origin master
Username for 'https://github.com': binrang
Password for 'https://binrang@github.com': 
Counting objects: 39, done.
Compressing objects: 100% (28/28), done.
Writing objects: 100% (39/39), 11.06 KiB | 0 bytes/s, done.
Total 39 (delta 0), reused 0 (delta 0)
To https://github.com/binrang/ex-electrode-app.git
 * [new branch]      master -> master
Branch master set up to track remote branch master from origin.
[binrang@localhost ex-electrode-app]$ 


3. heroku에 배포를 시작하자.

heroku에 로그인을 한다.
1
2
3
4
5
6
[binrang@localhost ex-electrode-app]$ heroku login
Enter your Heroku credentials.
Email: binrang44@gmail.com
Password (typing will be hidden): 
Logged in as binrang44@gmail.com
[binrang@localhost ex-electrode-app]$ 

아래 명령어를 이용하면 heroku에 git remote를 랜덤으로 생성되는 것을 확인한다.

1
2
3
4
[binrang@localhost ex-electrode-app]$ heroku create
Creating app... done, ⬢ obscure-anchorage-36314
https://obscure-anchorage-36314.herokuapp.com/ | https://git.heroku.com/obscure-anchorage-36314.git
[binrang@localhost ex-electrode-app]$ 

이제 heroku에 앱을 생성해보자.

1
2
3
4
[binrang@localhost ex-electrode-app]$ heroku create ex-electrode-app
Creating ⬢ ex-electrode-app... done
https://ex-electrode-app.herokuapp.com/ | https://git.heroku.com/ex-electrode-app.git
[binrang@localhost ex-electrode-app]$ 

기존에 다른 앱과 같은 이름이 있다면 아래와 같은 에러가 날 것이다.

1
2
3
4
[binrang@localhost ex-electrode-app]$ heroku create ex-electrode-app
Creating ⬢ ex-electrode-app... !
 ▸    Name is already taken
[binrang@localhost ex-electrode-app]$ 

이럴 때는 앱이름을 변경하던가, 아니면 이미 heroku에 같은 이름으로 배포된 앱을 삭제 한 후 진행하여야 한다.

heroku의 환경변수를 아래와 같이 설정한다.

1
2
3
4
[binrang@localhost ex-electrode-app]$ heroku config:set NPM_CONFIG_PRODUCTION=false
Setting NPM_CONFIG_PRODUCTION and restarting ⬢ obscure-anchorage-36314... done, v3
NPM_CONFIG_PRODUCTION: false
[binrang@localhost ex-electrode-app]$ 

./config/production.js 파일의 환경과 맞추기 위해서 heroku 의 환경도 변경한다.

1
2
3
4
5
6
7
8
[binrang@localhost ex-electrode-app]$ vi ./config/production.js
...
const serveStaticFiles = () => {
  return process.env.STATIC_FILES_OFF !== "true";
};
...

1
2
3
4
[binrang@localhost ex-electrode-app]$ heroku config:set STATIC_FILES_OFF=true
Setting STATIC_FILES_OFF and restarting ⬢ obscure-anchorage-36314... done, v4
STATIC_FILES_OFF: true
[binrang@localhost ex-electrode-app]$ 


이제 heroku에 push를 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
[binrang@localhost ex-electrode-app]$ git push heroku master
Counting objects: 39, done.
Compressing objects: 100% (28/28), done.
Writing objects: 100% (39/39), 11.06 KiB | 0 bytes/s, done.
Total 39 (delta 0), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Node.js app detected
remote: 
remote: -----> Creating runtime environment
......
remote:        Running heroku-postbuild
remote:        
remote:        > ex-electrode-app@0.0.1 heroku-postbuild /tmp/build_fc93520dc3ea5e4f15d1a068b58df244
remote:        > gulp build
remote:        
remote:        [08:01:32] Using gulpfile /tmp/build_fc93520dc3ea5e4f15d1a068b58df244/gulpfile.js
remote:        [08:01:32] Starting 'build'...
......
remote: -----> Compressing...
remote:        Done: 69.1M
remote: -----> Launching...
remote:        Released v5
remote:        https://obscure-anchorage-36314.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/obscure-anchorage-36314.git
 * [new branch]      master -> master
[binrang@localhost ex-electrode-app]$ 

이제 URL을 구동 시켜보자

1
2
3
4
5
6
[binrang@localhost ex-electrode-app]$ heroku open
 ▸    Error opening web browser.
 ▸    Error: Exited with code 3
 ▸    
 ▸    Manually visit https://obscure-anchorage-36314.herokuapp.com/ in your browser.
[binrang@localhost ex-electrode-app]$ 

에혀... 에러다...
뭐냐?... 웹 브라우저를 오픈 못하겠다라는 것이구만...
당연하지.. ssh로 붙어서 사용하는거라 당연히 저 에러가 뜨지...

그 대신 수동으로 나와있는 URL을 복사 해서 브라우저에 입력 후 실행해보자.
ㅋㅋ.. 떴다....

클라우드 플랫폼인 heroku에다 드디어 배포를 완료 했다.

참고 URL : http://www.electrode.io/docs/deploy_app.html
작성자: 시간:
라벨: , , , ,

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)