서버 React 설치
설치전 아래 페이지를 꼭 참고한다.
- $ sudo apt-get install -y nodejs
- $ sudo apt install npm
설치 로그를 참고한다.
twlabs01@twlabs01:~$ cd Projects/
twlabs01@twlabs01:~/Projects$ mkdir react
twlabs01@twlabs01:~/Projects$ cd react
twlabs01@twlabs01:~/Projects/react$ sudo apt-get install -y nodejs
[sudo] password for twlabs01:
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following packages were automatically installed and are no longer required:
linux-hwe-5.4-headers-5.4.0-77 linux-hwe-5.4-headers-5.4.0-80
Setting up nodejs-doc (8.10.0~dfsg-2ubuntu0.4) ...
...
Processing triggers for man-db (2.8.3-2ubuntu0.1) ...
Processing triggers for libc-bin (2.27-3ubuntu1.4) ...
twlabs01@twlabs01:~/Projects/react$ sudo apt install npm
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following packages were automatically installed and are no longer required:
linux-hwe-5.4-headers-5.4.0-77 linux-hwe-5.4-headers-5.4.0-80
(...)
0 upgraded, 79 newly installed, 0 to remove and 37 not upgraded.
Need to get 6,179 kB of archives.
After this operation, 29.8 MB of additional disk space will be used.
Do you want to continue? [Y/n]
Get:1 http://kr.archive.ubuntu.com/ubuntu bionic-updates/main amd64 python2.7-minimal amd64 2.7.17-1~18.04ubuntu1.6 [1,291 kB]
(...)
Processing triggers for gnome-menus (3.13.3-11ubuntu1.1) ...
Processing triggers for mime-support (3.60ubuntu1) ...
twlabs01@twlabs01:~/Projects/react$ node -v
v8.10.0
twlabs01@twlabs01:~/Projects/react$ npm -v
3.5.2버전이 너무 낮은 것으로 설치되어 있다.
Node, npm 최신 버전으로 업데이트 하기
- sudo apt-get install -y curl
- curl -o- <https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh> | bash
- source ~/.bashrc
- nvm install v14.18.1
- npm install -g npm@latest
- node -v
- npm -v
twlabs01@twlabs01:~/Projects/react$ sudo apt-get install -y curl
twlabs01@twlabs01:~/Projects/react$ sudo apt update
Get:1 http://dl.google.com/linux/chrome/deb stable InRelease [1,811 B]
...
Get:36 http://kr.archive.ubuntu.com/ubuntu bionic-backports/universe amd64 DEP-11 Metadata [9,276 B]
Fetched 15.5 MB in 4s (3,734 kB/s)
twlabs01@twlabs01:~/Projects/react$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
twlabs01@twlabs01:~/Projects/react$ source ~/.bashrc
twlabs01@twlabs01:~/Projects/react$ nvm list-remote
v0.1.14
...
v14.17.6 (LTS: Fermium)
v14.18.0 (LTS: Fermium)
v14.18.1 (Latest LTS: Fermium)
twlabs01@twlabs01:~/Projects/react$ nvm install v14.18.1
Downloading and installing node v14.18.1...
Downloading https://nodejs.org/dist/v14.18.1/node-v14.18.1-linux-x64.tar.xz...
######################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v14.18.1 (npm v6.14.15)
Creating default alias: default -> v14.18.1
twlabs01@twlabs01:~/Projects/react$ node -v
v14.18.1
added 70 packages from 18 contributors, removed 289 packages and updated 148 packages in 3.89s
twlabs01@twlabs01:~/Projects/react$ npm install -g npm@latest
/home/twlabs01/.nvm/versions/node/v14.18.1/bin/npm -> /home/twlabs01/.nvm/versions/node/v14.18.1/lib/node_modules/npm/bin/npm-cli.js
/home/twlabs01/.nvm/versions/node/v14.18.1/bin/npx -> /home/twlabs01/.nvm/versions/node/v14.18.1/lib/node_modules/npm/bin/npx-cli.js
+ npm@8.1.1
added 70 packages from 18 contributors, removed 289 packages and updated 148 packages in 3.89s
Creating default alias: default -> v14.18.1
twlabs01@twlabs01:~/Projects/react$ node -v
v14.18.1
twlabs01@twlabs01:~/Projects/react$ npm -v
8.1.1
리액트 앱 실행
간단하게 프로젝트를 만들어서 실행해 보자.
twlabs01@twlabs01:~/Projects/react$ npx create-react-app myapp
Need to install the following packages:
create-react-app
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
Creating a new React app in /home/twlabs01/Projects/react/myapp.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1890 packages, and audited 1891 packages in 39s
152 packages are looking for funding
run `npm fund` for details
58 vulnerabilities (16 moderate, 40 high, 2 critical)
To address all issues, run:
npm audit fix
Run `npm audit` for details.
Initialized a git repository.
Installing template dependencies using npm...
added 57 packages, and audited 1948 packages in 3s
153 packages are looking for funding
run `npm fund` for details
58 vulnerabilities (16 moderate, 40 high, 2 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Removing template package using npm...
removed 1 package, and audited 1947 packages in 2s
153 packages are looking for funding
run `npm fund` for details
58 vulnerabilities (16 moderate, 40 high, 2 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Created git commit.
Success! Created myapp at /home/twlabs01/Projects/react/myapp
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd myapp
npm start
Happy hacking!
twlabs01@twlabs01:~/Projects/react$ cd myapp
twlabs01@twlabs01:~/Projects/react/myapp$ npm start
Compiled successfully!
You can now view myapp in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.0.3:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
- localhost:3000/ 접속 화면
웹서버에 바인딩 하기
Nginx로 React를 배포하는 방법
React(리액트) 앱을 배포할 때 Nginx, Aphache와 같은 웹서버로 배포를 해야 합니다. Nginx는 오픈소스이며 매우 효율적인 웹서버입니다. 이 글에서 우분투 18.04환경에서 nginx로 React 앱을 배포하는 방법
codechacha.com
실제 내가 설치한 설치 로그를 참고용으로 남겨둔다.
실제로 해 본 결과를 남겨 두는게 최고다~~
twlabs01@twlabs01:/etc/nginx/sites-available$ sudo vi myapp
[sudo] password for twlabs01:
---
# 파일 내용
server {
listen 3000;
location / {
root /home/twlabs01/Projects/react/myapp/build;
#root /home/user/myapp/build;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}
----
twlabs01@twlabs01:/etc/nginx/sites-available$ sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/myapp
twlabs01@twlabs01:/etc/nginx/sites-available$
--- SSL 지원 스크립트 ---
server {
listen 30000 ssl;
server_name testapi.twarelab.com;
ssl_certificate /etc/letsencrypt/live/testapi.twarelab.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/testapi.twarelab.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
location / {
root /home/twlabs01/Projects/react/myapp/build;
#root /home/user/myapp/build;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 497 https://$host:$server_port$request_uri;
}