Tech | 2021. 11. 5. 08:43

서버 React 설치 - 실제 설치 로그 남기기

서버 React 설치

설치전 아래 페이지를 꼭 참고한다.

우분투 Node.js 설치및 npm 환경구축

  • $ 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 최신 버전으로 업데이트 하기

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.

 

리액드 Hello world 화면

 

웹서버에 바인딩 하기

Nginx로 React를 배포하는 방법

 

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;

}

 

댓글을 달아 주세요

">