hufspnp.com 웹 배포 -1 (nginx & react & https & certbot)

PnP 학회 웹 팀 멤버들이 React를 이용해서 개발한 학회 웹 사이트를 배포한 과정을 설명하기 위한 글 입니다.

PnP 학회 홈페이지는 별도의 DB나 백엔드 없이 React만을 이용해서 개발을 했습니다.

(해당 프로젝트의 소스코드는 hufs-pnp github에서 확인할 수 있습니다.)

 

해당 웹은 학회 세미나실의 PC에서 구동중입니다.

PC는 서버용으로 사용하기 위해 Ubuntu 20.04.4 LTS 운영체제를 설치해두었습니다.

 

React 프로젝트를 배포하기 위해 프로젝트를 빌드하고 웹 서버를 설치하고 배포한 다음 https 보안을 적용해서 도메인을 연결하는 과정을 설명하겠습니다. 처음 배포하고 시간이 지나고 이 글을 작성하고 있기 때문에 캡처된 화면도 없고 중간에 오류가 많이 수정해서 빠진 내용이 있을 수 있지만 bash_history 확인하면서 진행한 내용을 최대한 적습니다. 이상하다고 생각되는 부분은 말씀해주시면 감사하겠습니다. (그리고 포스팅이 몇 번 날라가서 ... 점점 내용이 줄었습니다..)

 

이번 포스트에서 배포하는 과정을 설명하고 다음 포스트에서 google analytics 연결한 부분을 설명하겠습니다.

Contents

1. React 환경 세팅

2. React 프로젝트 build

3. Nginx 웹 서버

4. 도메인 연결

5. https적용(Certbot)

1. React 환경 세팅

-nvm 설치

nvm이란 Node Version Manger이다. Node.js의 버전을 관리하는 도구이다. 지속적으로 프로젝트가 업데이트 될 것을 고려하여 nvm을 이용하여 Node.js를 설치하였다. nvm github을 참고하여 설치를 진행하였다. 설치 방법이 여러가지 있지만 제가 사용한 것들에 대해서만 작성하겠습니다.

nvm github: https://github.com/nvm-sh/nvm

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

curl을 이용해서 설치 스크립트를 실행하였다.

- .bashrc 수정

.bashrc은 bash가 수행될 때 실행되는 함수를 제어하는 지역적인 시스템 설정과 관련된 파일이다. nvm이 정상적으로 실행되기 위해 ~/.bashrc에 있는 파일의 맨 아래에 아래 코드를 추가해준다.

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

- nvm 설치 확인

$ command -v nvm

위의 명령어를 이용하여 nvm이 정상적으로 인식되는지 확인한다. "nvm: command not found"가 출력된다면 수정된 .bashrc가 적용이 안 됐을것이다. 터미널을 닫고 새로운 터미널을 실행시키거나 아래 명령어를 입력해서 수정된 파일을 적용해준다. 자신의 shell에 따라 위의 bashrc가 아닐 수 있다. 위의 nvm github을 참고하길 바란다.

$ source ~/.bashrc

- Node.js 설치

최신 Node.js의 lts버전으로 설치해주었다. 

$ nvm install --lts

설치 후 아래 명령어로 node와 npm의 버전을 확인해본다.

$ node -v
v16.14.0

$ npm -v
8.5.1

2. React 프로젝트 빌드

- React 프로젝트 가져오기

새로운 폴더를 만들어서 git clone을 해주었다.

$ mkdir hufspnp.com
$ cd hufspnp.com
$ git clone [github 링크] .

- React packages 설치

이 프로젝트를 진행하면서 여러명이 각자 다른 환경에 개발이 진행하여 중간에 package충돌에 대한 이슈가 많이 발생했었다. 그래서 package 업데이트를 하기 위해 npm-check-updates를 설치해서 사용하였다.

$ npm install -g npm-check-updates

아래 명령어를 이용해서 packages파일들을 업데이트 해준다.

$ ncu -u

업데이트 된 packages파일들을 기반으로 packages를 설치한다. package 설치과정에서 문제가 발생하면 hufs-pnp github README를 읽어보길 바란다.

$ npm install

아래 명령어로 정상적으로 실행되는지 확인하고 문제를 해결해줍니다.

$ npm start

- React 프로젝트 build

프로젝트를 배포하기 위해서 전체 프로젝트를 build해준다. 그럼 build 폴더가 생기고 나중에 이곳 경로를 연결하여 배포해준다.

$ npm run build

3. Nginx 웹서버

여러 웹 서버 중 고민하다 Nginx를 이용한 자료가 많고 사용해본 경험이 있기 때문에 nginx를 사용하였다.

- Nginx 설치

$ sudo apt install nginx

위의 명령어로 nginx를 설치하고 그 전에 만든 build폴더를 nginx에 연결시켜야한다. 그러기 위해 nginx의 기본 파일과 폴더를 수정해야한다.

nginx의 설정에 관한 파일은 아래 링크에 설명을 확인할 수 있다. 해당 링크는 /etc/nginx/sites-available/default에 소개되어 있다.

debian wiki - nginx: https://wiki.debian.org/Nginx/DirectoryStructure

Nginx/DirectoryStructure - Debian Wiki

해당 링크의 설명을 간단히 정리하면

• /etc/nginx: 해당 디렉토리에 Nginx의 설정이 구성되어있다.
• /etc/nginx/nginx.conf: Nginx가 처음 시작할 때 읽는 파일이다. 이 파일은 편집하지 않는 것이 좋다.
• sites-available: 가상 서버 환경들에 대한 설정 파일들이 위치하는 부분. 사용하지 않는 설정 파일도 있을 수 있다.
• sites-enabled: site-available에 있는 가상 서버 파일들 중에서 활성화 하는 파일을 symlink로 연결해두는 폴더. 이곳에 있는 파일들을 읽어서 서버를 세팅한다.

그럼 이곳에서 sites-available 디렉토리에 있는 default파일을 수정하고 sites-enabled에 symlink를 생성하면 된다.

- sites-available 수정

초기의 default파일을 보면 기본적인 설명이 주석으로 작성되어 있다. (나름 자세히 작성되어 있으니 읽어보세요.)

주석을 지우고 기본적인 내용을 보면 아래와 같이 작성되어 있다.

server {
	listen 80 default_server;
	listen [::]:80 default_server;
	root /var/www/html;
	index index.html index.htm index.nginx-debian.html;

	server_name _;

	location / {
    		try_files $uri $uri/ =404;
	}
}

default파일을 지우고 우리의 환경에 맞게 www.hufspnp.conf 파일을 만든다. (나중에 뒤에서 https를 적용하면 다시 수정된다.)

server {
	listen 80;
	listen [::]:80;
	root /home/pnp30/hufspnp.com/build;
	index index.html;

	server_name www.hufspnp.com;

	location / {
    		try_files $uri $uri/ =404;
	}
}

 

pnp서버에서 배포하기 전에 www.hufspnp.com uri로 github page에 배포되어 있었기 때문에 hufspnp.com으로 접속할 수 있도록 작업을 진행한 다음 정상적으로 배포된 모습을 확인하고 www.hufspnp.com으로 접속할 수 있게 conf파일을 하나 더 만들어 주었다. 이렇게 하면 하나의 프로젝트를 두 개의 uri로 배포할 수 있다. hufspnp.conf파일은 위에서 server_name만 변경해서 아래와 같이 작성하였다.

server {
	listen 80;
	listen [::]:80;
	root /home/pnp30/hufspnp.com/build;
	index index.html;

	server_name hufspnp.com;

	location / {
    		try_files $uri $uri/ =404;
	}
}

- sites-enabled

작성한 파일을 sites-enabled 폴더에 symlink를 생성해주어 nginx가 활성화 할 수 있도록 해준다.

$ sudo ln -s /etc/nginx/sites-available/hufspnp.conf /etc/nginx/sites-enabled/hufspnp.conf
$ sudo ln -s /etc/nginx/sites-available/www.hufspnp.conf /etc/nginx/sites-enabled/www.hufspnp.conf

위의 명령어로 ln -s 명령어로 만들 수 있다.

4. 도메인 연결

이제 구입한 도메인의 dns 설정을 서버 PC의 ip주소로 설정해준다. pnp는 mailplug에서 도메인을 구매했다. 다른 도메인 구매 사이트도 비슷할 것이다. A 타입으로 레코드를 생성하고 ip주소와 도메인 주소를 입력해준다. 아래의 호스트명에 www를 입력하고 타입을 A로 선택하고 ip주소를 입력한다. 앞에서 말했듯이 www. 없는 uri로 먼저 시도했기 때문에 두 개의 레코드가 있다. 

 

(조금 설명하자면 DNS레코드란 DNS에 받은 요청을 어떻게 처리할 것인지에 대한 정보를 작성하는 것으로 그 중 A 타입은 IP주소와 도메인 주소를 매핑할 때 사용하는 레코드로 하나의 도메인에 여러 개의 IP주소를 등록할 수 있다. 자세한 내용은 아래 참고자료를 확인하기 바란다.)

이렇게 DNS를 설정하면 http://www.hufspnp.com 또는 http://hufspnp.com으로 홈페이지에 접속이 가능한다. 

$ sudo nginx -t

위의 명령어로 nginx 설정 파일을 테스트한다.

$ sudo nginx -s reload

위의 명령어로 nginx를 재시작한다.

이제 접속이 되는지 확인해보자. (이때 연결되는 시간이 좀 걸릴 수도 있다.)

5. https적용(Certbot)

http란 HyperText Transfer Protocol의 약자로 텍스트 기반의 통신 규약이다. https는 s, Secure Socket이 추가된 개념이다. 쉽게 말하면 https는 http에 ssl인증서를 이용하여 보안의 요소를 추가한 것이다. 따라서 https는 서버와 클라이언트 사이의 모든 통신 내용이 암호화된다. 자세한 내용은 본 블로그에서 https를 검색해보기 바란다.

 

정확히 기억나지 않지만, Ubuntu 16v 에서는 openssl을 이용해서 ssl인증서를 발급 받을 수 있었는데 Ubuntu 18v로 업데이트 되면서 이것을 지원하지 않는다. 그래서 ssl 인증서를 발급받기 위해서 별도의 비용이 발생할 것이라고 생각했는데 무료 ssl 인증서를 발급해주는 Certbot을 확인하고 적용시켰다.

 

Certbot또한 Certbot 공식 홈페이지를 참고해서 설치를 진행하였다.

Cerbot page: https://certbot.eff.org/

Certbot

- Certbot 설치

Certbot 홈페이지에 들어가면 이용하는 Software(web server)와 System(OS)를 선택하면 그에 맞는 메뉴얼을 제공해준다.

안내되는 메뉴얼을 따라서 설치를 진행한다. 메뉴얼에 따르면 certbot을 snap을 이용해서 설치한다. snap은 apt와 같은 패키지를 설치하기 위해 사용되는 도구이다. (다른 자료들을 보면 apt를 이용해서 설치하기도 한다.) 자세한 내용은 참고자료의 snap을 확인하기 바란다.

$ sudo snap install core
$ sudo snap refresh core

보통 snap이 설치되어 있을 것이다. 위의 명령어로 snap을 최신 버전으로 만들어 준다.

이전에 Certbot을 설치했다면 지워준다. 이곳에 설치한 적이 없기 때문에 진행하지 않았다. (홈페이지 메뉴얼을 참고하세요)

$ sudo snap install --classic certbot

위의 명령어로 snap으로 certbot을 설치한다. 

$ sudo ln -s /snap/bin/certbot /usr/bin/certbot

위의 명령어로 certbot 명령어를 준비한다. (history를 보니 이것은 하지 않았다..)

$ sudo certbot --nginx

위의 명령어로 인증서를 설치하고 certbot이 자동으로 nginx 설정을 편집하고 https 접근을 활성화시킨다. 

$ sudo certbot renew --dry-run

위의 명령어로 인증서 자동 갱신을 테스트 해본다.

여기까지 진행하면 자동으로 이전에 수정했던 sites-available의 파일들이 아래와 같이 수정되었을 것이다.

server {
	root /home/pnp30/hufspnp.com/build;
	index index.html index.htm;
	location / {
		try_files $uri $uri/ /index.html;
	}
	server_name www.hufspnp.com;



    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/hufspnp.com-0001/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/hufspnp.com-0001/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



}
server {
    if ($host = www.hufspnp.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


	server_name www.hufspnp.com;
    listen 80;
    return 404; # managed by Certbot


}

- nginx 확인

이제 마무리로 nginx상태를 확인하고 system으로 등록해서 부팅시 자동으로 nginx가 실행되도록 하면 된다.

$ sudo nginx -t

위의 명령어로 nginx 설정 파일을 점검하고

$ sudo nginx -s reload

nginx를 재시작해주고 uri로 접속해준다. 정상적으로 접속되는 것을 확인해보자

$ sudo systemctl enable nginx

systemctl 명령어로 부팅시 자동으로 nginx가 실행되도록 해준다. 

 

이렇게 하면 정상적으로 배포가 되었을 것이다. 중간에 오류가 발생한다면 댓글이나 연락주시면 같이 고민해보겠습니다.

참고자료

-bashrc: https://dohk.tistory.com/191

쉘의 개념, bashrc의 개념

- nginx: https://twpower.github.io/50-make-nginx-virtual-servers

[Nginx] Nginx에서 가상서버 환경 설정하기

- DNS 레코드: https://goldsony.tistory.com/148

도메인이란? DNS(Domain Name System), DNS 레코드

- snap :https://snapcraft.io/about

About Snaps | Snapcraft

- nginx-command: https://www.nginx.com/resources/wiki/start/topics/tutorials/commandline/

CommandLine | NGINX

- nginx-beginner's guide: https://nginx.org/en/docs/beginners_guide.html

Beginner’s Guide