Reactjs

React, Strapi, Nginx, MongoDB 및 DigitalOcean을 사용하여 Full-Stack 웹 애플리케이션…

조회 948 (작성일 2020.10.09 16:35)
- 음성
- 목록
- - 검색

React.js, Nginx, Strapi 및 MongoDB Atlas를 사용하여 풀 스택 애플리케이션을 설정하고 호스팅 하는 방법을 단계별로 살펴 보겠습니다. DigitalOcean을 사용하여 이 애플리케이션을 호스팅하고 MongoDB Atlas를 무료 데이터베이스 클러스터로 호스팅 할 것입니다.

참고-이 튜토리얼에서는 React 앱을 통해 Strapi API와 상호 작용하지 않을 것입니다. Nginx로만 상용구 코드를 설정하고 나머지는 귀하에게 달려 있습니다!

https://dev.to/jackrkelly/create-a-full-stack-web-application-using-react-strapi-nginx-mongodb-and-digitalocean-bkh

단계 :

DigitalOcean 물방울 생성 및 구성
도메인 이름 설정
Let 's Encrypt를 사용하여 Nginx 및 SSL 설정
MongoDB Atlas 클러스터 생성
Create-React-App 사이트 생성 및 배포
Create-Strapi-App API 생성 및 배포

1 단계-DigitalOcean Droplet 생성 및 구성 :

첫 번째 단계는 클라우드에 DigitalOcean Droplet을 설정하여 사이트와 API를 호스팅 하는 것입니다. 원하는 클라우드 호스팅 공급자를 사용할 수 있지만 단계는 선택한 호스트에 따라 다를 수 있습니다.

먼저 DigitalOcean에서 계정을 만들어야 합니다. 이 링크를 사용하여 가입 후 60 일 동안 만료되는 무료 100$ 크레딧을 받을 수 있습니다. 신용 카드를 요구할 것입니다. 무료 크레딧으로 100 달러를 모두 사용하지 않거나 호스팅 60 일 이상을 사용하지 않는 한 비용이 청구되지 않습니다.

1.1 단계-새 물방울 만들기

계정을 만들고 로그인 한 후 상단의 탐색 표시 줄을 보고 "만들기"버튼을 클릭합니다. 드롭 다운 메뉴가 나타나면 드롭 릿을 클릭합니다.

Alt Text

"이미지 선택"에서 "배포"탭이 선택되어 있는지 확인합니다. 이 애플리케이션의 경우 Ubuntu-18.4 (LTS) x64를 사용합니다.

Alt Text

다음으로 플랜을 선택합니다. 이 특정 응용 프로그램의 경우 10 $ mo 계획을 사용합니다. 이는 Strapi에 필요하며, 가이드에 "최소 2GB / 1 CPU"라고 명시되어 있습니다.

Alt Text

다음으로 사이트를 호스팅 할 위치를 선택할 수 있습니다. 일반적으로 이 사이트에 가장 많이 액세스하는 사람들과 가장 가까운 사이트를 선택하는 것이 좋습니다.

Alt Text

"인증"섹션에서 "비밀번호"를 선택한 다음 서버의 루트 계정에 로그인하는 데 사용할 보안 비밀번호를 입력하십시오.

Alt Text

"Finalize and create"에서 명시된 대로 물방울을 식별하는 데 도움이 되는 호스트 이름을 변경할 수 있습니다.

Alt Text

그런 다음이 물방울을 만들 프로젝트를 선택합니다. 그런 다음 "Create Droplet"버튼을 누르십시오.

Alt Text

몇 분 후 (DigitalOcean이 물방울을 설정하기 위해). 이제 서버가 실행 중입니다.

1.2 단계-서버에 로그인

터미널을 통해 SSH를 통해 서버에 연결하고 드롭 릿을 설정할 때 선택한 루트 암호를 사용해야 합니다.

서버에 SSH를 사용하려면 Droplet에 대한 IP 주소가 필요합니다. 왼쪽 탐색 모음에서 "Droplets"를 선택하여 Droplet의 대시 보드로 이동 한 다음 방금 생성 한 방울을 선택합니다. "ipv4"주소가 필요합니다. 주소를 클릭하여 복사하십시오.

Alt Text

이제 Droplet 대시 보드에서 복사 한 ipv4 주소를 사용하여 터미널에서 이 명령을 실행해야 합니다 ( "droplet_address"를 방금 복사 한 ipv4 주소로 바꿉니다).

ssh root@droplet_address

이 명령을 실행하면 호스트 인증에 대한 경고가 표시 될 수 있습니다. 이 경우 경고를 수락하고 선택한 루트 암호를 제공하십시오.

1.3 단계-새 사용자 만들기

루트 수퍼 유저를 사용하여 서버를 설정하면 루트 사용자가 모든 명령을 실행할 권한이 있기 때문에 실수로 파괴적인 작업이 발생할 수 있습니다. 따라서 서버를 보다 안전하게 설정하기 위해 별도의 사용자를 생성합니다 ( "john"을 원하는 사용자 이름으로 대체).

adduser john

1.4 단계-새 사용자에게 루트 권한 부여

이제 기본 계정 권한이 있는 새 계정이 있지만 이러한 권한으로는 서버를 설정하는 데 충분하지 않습니다. 따라서 계정에 루트로 명령을 실행할 수 있는 옵션을 제공합니다. sudo 그룹에 사용자를 추가 한 후에는 명령 앞에 "sudo"를 추가하여 루트로 실행할 수 있습니다 (이전 단계에서 선택한 사용자 이름으로 "john"을 대체).

usermod -aG sudo john

이제 새 계정에 루트 권한이 있습니다. 이제 다음 명령을 입력하여 새 사용자로 로그인하십시오.

su - john

1.5 단계-기본 방화벽 설정

기본적으로 Ubuntu 서버에는 "Uncomplicated Firewall"을 나타내는 "UFW"라는 기본 방화벽이 내장되어 있습니다. 설정이 매우 간단하며 서버의 보안이 크게 향상됩니다.

다음을 입력하여 UFW에서 현재 허용하는 응용 프로그램을 확인할 수 있습니다.

sudo ufw app list

이전에 입력 한 명령에 대한 응답은 다음과 같아야 합니다.

Available applications
  OpenSSH

OpenSSH는 SSH 프로토콜을 사용하여 원격으로 로그인하는 도구입니다. 이는 SSH를 통해 귀하의 서버에 로그인하는 데 필요합니다. 다음을 입력하여 이러한 연결을 허용해야 합니다.

sudo ufw allow OpenSSH

그런 다음 변경 사항을 실행해야 합니다. 방화벽을 활성화하려면 다음 명령을 입력하십시오.

sudo ufw enable

계속하려면 "y"를 누른 다음 "Enter"를 누르십시오. 방화벽이 활성화되어 있고 변경 사항이 발생했는지 확인하려면 다음을 입력하여 방화벽 상태를 확인하십시오.

sudo ufw status

이 명령의 출력은 다음과 같아야 합니다.

Status: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
OpenSSH (v6)               ALLOW       Anywhere (v6)

그것이 당신이 받은 출력 이었다면 지금까지 풀 스택 애플리케이션을 호스팅 하는 올바른 길을 가고 있는 것입니다. 다음으로 두 번째 기본 단계는 도메인 이름을 설정하는 것입니다.

2 단계-도메인 이름 설정

이 단계에서는 도메인 이름 등록 기관에서 도메인 이름을 구입해야 합니다. 일부 도메인 이름 등록 기관에는 GoDaddy, namecheap 등이 포함되지만 이에 국한되지 않습니다.

DigitalOcean을 사용하여 도메인을 구성하고 도메인을 서버로 가리킵니다. 상단의 탐색 표시 줄을 보고 "만들기"버튼을 클릭합니다. 드롭 다운 메뉴가 나타나면 Domains / DNS를 클릭합니다.

Alt Text

Domains / DNS를 클릭하면 타사 등록 기관에서 구입 한 도메인 이름을 입력합니다. 그런 다음 도메인 추가를 클릭합니다.

Alt Text

도메인을 추가하면 입력 한 도메인의 레코드 페이지로 리디렉션됩니다. 도메인이 이미 디지털 오션 이름 서버를 가리키고 있지 않다고 가정하면 "다음 단계는 무엇입니까?"라는 상자가 표시되어야 합니다. 즉, 도메인을 DigitalOcean의 네임 서버로 지정해야 합니다. DigitalOcean은 일반 도메인 등록 기관에서 도메인을 네임 서버로 지정하는 방법에 대한 자습서를 만들었습니다.

도메인 등록 기관에서 이름 서버를 변경 한 후 이제 DigitalOceans DNS 레코드를 사용하여 도메인을 서버로 지정할 수 있습니다.

첫 번째 레코드의 경우 Hostname 필드에 "@"를 입력하고 원하는 Droplet을 선택한 다음 Create Record를 누릅니다.

Alt Text

두 번째 레코드의 경우 Hostname 필드에 "www"를 입력하고 원하는 Droplet을 선택한 다음 Create Record를 누릅니다.

Alt Text

3 단계-Let 's Encrypt를 사용하여 Nginx 및 SSL 설정

이제 도메인을 서버로 지정했습니다. React.js 및 Strapi 앱을 호스팅해야 합니다. Nginx를 사용할 것입니다.

3.1 단계 Nginx 설치

터미널에서 서버에 대한 SSH 연결이 중단되지 않았는지 확인합니다. 그런 다음 다음 명령을 실행하여 Nginx를 설치합니다.

sudo apt-get install nginx

설치가 완료되면 Nginx에 액세스 할 수 있도록 UFW (방화벽)를 조정해야 합니다.

3.2 단계 UFW에서 Nginx 활성화

SSH 연결을 허용하기 위해 OpenSSH를 활성화 한 방법과 유사합니다. 다음을 실행하여 모든 응용 프로그램을 나열합니다.

sudo ufw app list

Nginx가 올바르게 설치되었다고 가정하면 UFW app list 명령은 다음과 같이 응답해야 합니다.

Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
  OpenSSH

세 가지 가능한 Nginx 프로필이 있습니다.

Nginx Full-암호화되지 않은 암호화 된 트래픽 허용
Nginx HTTP-암호화되지 않은 트래픽 허용
Nginx HTTPS-SSL 암호화 트래픽 허용

Let 's Encrypt를 설정하지 않았으므로 일시적으로 "Nginx HTTP"를 선택합니다.

sudo ufw allow 'Nginx HTTP'

"Nginx HTTP"에 대한 트래픽을 허용 한 후 다음을 실행하여 변경이 성공했는지 확인할 수 있습니다.

sudo ufw status

이 명령의 출력은 다음과 같아야 합니다.

Status: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
Nginx HTTP                 ALLOW       Anywhere
OpenSSH (v6)               ALLOW       Anywhere (v6)
Nginx HTTP (v6)            ALLOW       Anywhere (v6)

3.3 단계 Nginx 웹 서버 테스트

Nginx가 이미 실행 중이어야 합니다. Nginx의 상태를 확인하여 테스트 할 수 있습니다.

systemctl status nginx

다음과 유사한 출력이 표시되어야 합니다.

● nginx.service - A high performance web server and a reverse proxy server
   Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
   Active: active (running) since Fri 2020-08-21 14:10:55 UTC; 2 days ago
     Docs: man:nginx(8)
 Main PID: 882 (nginx)
    Tasks: 2 (limit: 2361)
   CGroup: /system.slice/nginx.service
           ├─882 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
           └─883 nginx: worker process

이제 Nginx 웹 서버가 실행 중임을 확인 했으므로 테스트를 다음 단계로 진행할 수 있습니다. 선택한 브라우저에서 주소 표시 줄에 드롭 릿 ipv4 주소를 입력합니다.

서버 IP 주소로 이동하면 "nginx에 오신 것을 환영합니다"페이지가 표시됩니다. 다음과 같이 보입니다.

Alt Text

이제 웹 서버가 예상대로 작동하는지 확인 했으므로 도메인에 대한 SSL 인증서를 구성합니다.

3.4 단계 Let 's Encrypt 및 Certbot을 사용하여 SSL 인증서 구성

Let 's Encrypt는 암호화를 위한 SSL 인증서를 무료로 제공하는 Internet Security Research Group에서 운영하는 비영리 인증 기관입니다. 우리는 Certbot을 사용하여 프로세스를 자동화하고 SSL 인증서를 쉽게 얻을 수 있습니다.

다음을 실행하여 Certbot의 저장소를 설치합니다.

sudo add-apt-repository ppa:certbot/certbot

이 저장소 추가를 승인하려면 Enter를 누르십시오.

그런 다음 다음 명령을 실행하여 Nginx 특정 Certbot 설치를 설치합니다.

sudo apt install python-certbot-nginx

3.5 단계-Certbot 용 Nginx 구성 업데이트

Certbot은 인증서에 포함 할 도메인을 알아야 합니다.

다음을 실행하여 nano 또는 선택한 텍스트 편집기로 기본 구성을 엽니다.

sudo nano /etc/nginx/sites-available/default

도메인에 맞게 "server_name"속성을 수정합니다.

server_name example.com www.example.com;

server_name을 변경 한 후 구성을 확인해야 합니다.

sudo nginx -t

또한 Strapi가 작동하는 데 필요한 몇 가지 사항을 변경할 것입니다.

"location /"속성 앞에 다음 코드 섹션을 추가합니다.

    location /api/ {
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://strapi;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass_request_headers on;
    }

    location /dashboard {
        proxy_pass http://strapi/dashboard;
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass_request_headers on;
    }

또한 React App에서 react-router-dom을 사용하려는 경우 대체 웹 페이지를 "404"에서 "index.html"로 변경하는 것이 좋습니다. 가지고 있는 각 react-router 페이지에 대한 위치 경로를 만들 수도 있지만, 분명히 새 페이지가 만들어지면 매번 업데이트 해야 합니다.

    location / {
        try_files $uri $uri/ /index.html;
    }

CTRL + X를 눌러 nano를 종료 한 다음 Enter를 눌러 변경 사항을 저장합니다.

다시, Nginx 구성의 구문을 확인합니다.

sudo nginx -t

Strapi 및 Nginx와 관련하여 한 가지 더 변경해야 합니다. 포트 1337에서 호스팅 되는 Strapi 서버의 업스트림 구성을 업데이트해야 합니다. upstream.conf에서 nano를 실행합니다.

sudo nano /etc/nginx/conf.d/upstream.conf

upstream.conf를 입력 한 후 다음 코드 조각을 입력합니다.

upstream strapi {
    server 127.0.0.1:1337;
}

CTRL + X를 눌러 nano를 종료 한 다음 Enter를 눌러 변경 사항을 저장합니다.

이 단계의 마지막으로 Nginx 구성을 확인합니다.

sudo nginx -t

검사에서 오류가 없다고 가정하고 Nginx를 다시 로드하여 새 구성을 초기화합니다.

sudo systemctl reload nginx

3.6 단계-Nginx HTTPS를 지원하도록 방화벽 업데이트

이제 Certbot을 실행할 준비가 거의 되었지만 먼저 해야 할 일이 있습니다. 곧 SSL을 사용할 예정이므로 Nginx Full을 허용하도록 UFW 프로필을 변경해야 합니다.

sudo ufw allow 'Nginx Full'

UFW에서 이전 HTTP Nginx 프로필을 제거해야 합니다.

sudo ufw delete allow 'Nginx HTTP'

이제 Certbot을 실행하고 SSL 인증서를 받을 준비가 되었습니다.

자리 표시 자 값 대신 도메인과 함께 다음 명령을 실행합니다 (필요한 만큼 도메인을 사용할 수 있습니다. 각 도메인 앞에 "-d"를 추가해야 합니다).

sudo certbot --nginx -d example.com -d www.example.com

이메일 주소를 입력하고 서비스 약관에 동의하라는 메시지가 표시됩니다. 그런 다음 Certbot은 HTTPS 구성 방법을 묻습니다.

Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
-------------------------------------------------------------------------------
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
-------------------------------------------------------------------------------
Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

선택하고 Enter를 누르십시오. Nginx 구성이 업데이트 되고 Nginx가 자동으로 다시 로드됩니다.

옵션 "2 : 리디렉션"은 사이트 / API가 항상 https를 통해 제공되도록 하기 때문에 권장되는 선택입니다.

이제 사이트가 HTTPS를 통해 제공되고 있습니다. 지금까지 사용하고 있는 도메인으로 이동하여 이를 확인하십시오.

https://domain-name.com

3.7 단계-Certbot의 자동 갱신 기능 확인

Let 's Encrypt의 SSL 인증서는 90 일 동안 만 유효합니다. 따라서 Certbot이이 라이선스를 자동으로 갱신 할 수 있는지 확인해야 합니다. 갱신을 테스트하려면 다음을 실행하십시오.

sudo certbot renew --dry-run

dry-run이 성공적으로 완료되면 Certbot은 만료 30 일 이내에 인증서를 갱신합니다 (2 일 확인 간격).

4 단계-MongoDB Atlas 클러스터 생성

먼저 MongoDB Atlas 계정을 등록해야 합니다.

계정을 만들면 클러스터 (데이터베이스 집합)를 만들라는 메시지가 표시됩니다. 이 튜토리얼에서는 무료 클러스터를 사용합니다. 그러나 다른 계층을 자유롭게 선택하십시오. 설정은 똑같을 것입니다.

Alt Text

DigitalOcean Droplet에 대해 선택한 지역과 가장 가까운 지역을 선택하면 서버와 데이터베이스가 상호 작용하는 데 걸리는 시간이 최소화됩니다.

Alt Text

다음 설정은 선택 사항입니다. 구축 할 프로젝트와 관련된 클러스터 이름을 설정하는 것이 좋습니다.

Alt Text

원하는 대로 설정을 수정 한 후 "클러스터 만들기"버튼을 클릭합니다.

Alt Text

데이터베이스를 설정하는 데 몇 분 정도 걸릴 수 있습니다.

Alt Text

데이터베이스 설정이 완료되면 왼쪽 탐색을 사용하여 "네트워크 액세스"페이지로 이동합니다.

Alt Text

DigitalOcean 서버에 MongoDB 데이터베이스에 대한 액세스 권한을 부여해야 합니다. IP 주소가 데이터베이스를 수정할 수 있다면 이는 주요 보안 위험이 됩니다. 따라서 서버 IP를 화이트리스트에 추가하려면 "IP 주소 추가"버튼을 클릭하십시오.

Alt Text

다음으로 서버 ipv4 주소를 입력하고 이름을 지정하여 어떤 IP인지 기억하십시오. 완료되면 "확인"을 누르십시오.

Alt Text

이제 MongoDB Atlas Cluster를 설정하고 데이터베이스에 대한 서버 액세스 권한을 부여 했으므로 React 앱으로 이동할 준비가 되었습니다.

5 단계-Create-React-App 사이트 생성 및 배포

우리는 컴퓨터에 반응 앱을 로컬로 설정하고 변경을 원할 때 프로덕션 파일을 서버에 푸시합니다. 그러나 먼저 이러한 프로덕션 파일을 포함 할 디렉토리를 만들어야 합니다. "domain.com"을 귀하의 도메인으로 바꾸십시오.

sudo mkdir -p /var/www/domain.com/react

디렉터리를 만든 후에는 사용 중인 사용자 계정에 디렉터리 소유권을 부여해야 합니다. $ USER 환경 변수는 현재 로그인 한 계정입니다 (루트로 로그인하지 않았는지 확인하십시오).

sudo chown -R $USER:$USER /var/www/domain.com/react

5.1 단계-샘플 페이지 만들기

이제 프로덕션 파일의 디렉토리를 설정 했으므로 기본 HTML 파일을 만들어 모든 것이 작동하는지 확인하겠습니다.

먼저 다음을 실행하여 파일을 만듭니다.

nano /var/www/domain.com/react/index.html

그런 다음 html 파일에 다음 내용을 입력하십시오.

<html>
  <head>
    <title>Domain.com testing!</title>
  </head>
  <body>
    <h1>The placeholder html file is working!</h1>
  </body>
</html>

CTRL + X를 눌러 nano를 종료 한 다음 Enter를 눌러 변경 사항을 저장합니다.

5.2 단계-Nginx 구성 업데이트

이제 웹 파일을 제공 할 새 디렉토리를 만들었으므로 기본 디렉토리 "/ var / www / 대신"/var/www/domain.com/react "에서 파일을 제공 할 것임을 Nginx에 알려야 합니다. html "

이렇게 하려면 다음을 실행하여 Nginx 구성 파일을 다시 열어야 합니다.

sudo nano /etc/nginx/sites-available/default

루트 디렉토리를 수정합니다. CTRL + W를 누르고 "root"를 입력 한 다음 Enter를 눌러 텍스트를 검색 할 수 있습니다. 도메인 / 디렉토리를 반영하도록 루트 라인을 변경해야 합니다.

root /var/www/domain.com/react;

CTRL + X를 눌러 nano를 종료 한 다음 Enter를 눌러 변경 사항을 저장합니다. 그런 다음 다음을 실행하여 Nginx 구성 구문을 다시 확인합니다.

sudo nginx -t

문제가 없다고 가정하면 Nginx를 다시 시작하여 변경 사항을 적용합니다.

sudo systemctl restart nginx

이제 선택한 브라우저에서 웹 사이트를 방문하여 Nginx가 입력 한 index.html을 제공하는지 확인합니다.

https://domain.com

이 페이지가 표시되어야 합니다.

Alt Text

작동하면 리 액트 프로덕션 파일을 가져올 준비가 된 것입니다.

5.3 단계-로컬 머신에서 Create-React-App 생성

react앱 설정이 이미 있는 경우 5.4 단계로 건너 뛸 수 있습니다.

로컬 컴퓨터에 react 앱을 만들려면 npm과 노드가 설치되어 있는지 확인하고 원하는 디렉터리로 이동 한 다음 "your-site"를 사이트 이름으로 바꾸고 아래 두 명령 중 하나를 실행합니다.

NPX:

npx create-react-app your-site

Yarn:

yarn create react-app your-site

react 앱 설치가 완료되면 로컬 머신에서 애플리케이션을 테스트하여 사이트가 올바르게 작동하는지 확인할 수 있습니다. 이렇게 하려면 다음을 실행하여 프로젝트 상위 디렉토리에 있는지 확인합니다 ( "your-site"를 사이트 이름으로 바꿉니다).

cd your-site

그런 다음 다음을 실행하여 react 애플리케이션을 시작합니다.

npm run start

응용 프로그램이 시작되면 아래와 유사한 메시지가 표시됩니다.

Compiled Successfully!

You can now view your site in the browser.

Local: http://localhost:3000/
On Your Network: http://12.123.12.123:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

이제 http : // localhost : 3000 /로 이동하여 react 앱을 봅니다.

5.4 단계-서버에 푸시 할 프로덕션 빌드 만들기

이제 이전에 만든 샘플 index.html 파일을 react 사이트의 프로덕션 빌드로 바꿀 준비가 되었습니다. 먼저 다음을 실행하여 프로덕션 빌드를 생성해야 합니다.

npm run build

이 작업이 완료되면 Nginx가 사용자에게 서비스를 제공하는 데 필요한 파일이 있지만 파일은 여전히 로컬 시스템에 있으므로 이러한 파일을 서버로 푸시 해야 합니다. SCP를 사용하여 이를 수행 할 수 있습니다 ( "user", "server_ip_address"및 "domain.com"을 바꾸십시오).

scp -r ./build/* user@server_ip_address:/var/www/domain.com/html

파일 전송이 완료되면 원하는 브라우저를 열고 도메인으로 이동합니다. react 앱 상용구 만들기 페이지가 표시되어야 합니다 (아래 참조).

Alt Text

이제 "deploy-production"스크립트를 추가하여 서버에 대한 반응의 프로덕션 빌드를 더 쉽게 배포 할 수 있습니다.

react 앱 (로컬 머신)에서 "package.json"을 엽니 다.

"scripts"섹션에서 아래와 같이 "deploy-production"스크립트를 추가하십시오 ( "user", "server_ip_address"및 "domain.com"을 바꿔야 함).

"deploy-production": "react-scripts build && scp -r ./build/* user@server_ip_address:/var/www/domain.com/html"

"deploy-production"스크립트를 추가하면 스크립트 섹션이 다음과 같이 표시됩니다.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "deploy-production": "react-scripts build && scp -r ./build/* user@server_ip_address:/var/www/domain.com/html",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

로컬 머신에서 react 앱을 약간 변경 한 다음 react 앱의 루트 디렉토리에서 "deploy-production"스크립트를 실행하여 모든 것이 제대로 작동하는지 확인합니다.

6 단계-Create-Strapi-App API 생성 및 배포

Strapi 애플리케이션이 상주 할 디렉터리를 만들고 DigitalOcean 드롭 릿에 SSH를 사용하고 다음 명령을 실행하는 것으로 시작합니다.

sudo mkdir -p /var/www/domain.com/strapi

"strapi"디렉토리를 만든 후 다음을 실행하여 해당 디렉토리로 이동합니다.

cd /var/www/domain.com/strapi

이제 "strapi"디렉토리에 있으므로 다음 두 명령 중 하나를 실행하여 Strapi 앱을 만듭니다.

NPX:

npx create-strapi-app . --quick-start

Yarn:

yarn create strapi-app . --quick-start

이전에 나열된 명령을 실행하면 두 가지 설치 옵션이 표시되며 두 번째 옵션 인 "빠른 시작"을 선택합니다. 위쪽 화살표와 아래쪽 화살표를 사용하여 탐색하고 Enter 키를 눌러 옵션을 선택합니다.

? Choose your installation type
 ❯ Quickstart (recommended)
   Custom (manual settings)

6.1 단계-MongoDB 용 Strapi 구성

이제 MongoDB Atlas 웹 사이트로 이동하여 로그인했는지 확인합니다. 클러스터 대시 보드로 이동합니다.

Alt Text

그런 다음 원하는 클러스터에 대한 연결 버튼을 클릭합니다.

Alt Text

"애플리케이션 연결"을 선택합니다.

Alt Text

복사 버튼을 클릭하여 연결 문자열을 클립 보드에 저장합니다. 비밀번호를 MongoDB Atlas 비밀번호로 바꾸십시오. 이 코드를 공용 저장소에 푸시하려면 이 연결 문자열을 .env에 저장해야 합니다!

Alt Text

이제 MongoDB Atlas 연결 문자열이 있으므로 다음을 실행하여 "database.js"구성 파일로 이동합니다.

nano /config/database.js

다음 구성과 같이 database.js를 업데이트하고 "your-connection-string"을 방금 얻은 MongoDB Atlas 연결 문자열로 바꾸십시오.

{
  defaultConnection: "default",
  connections: {
    default: {
      connector: "mongoose",
      settings: {
        uri: "your-connection-string"
      },
      options: {
        ssl: true
      }
    }
  }
}

CTRL + X를 눌러 nano를 종료 한 다음 Enter를 눌러 변경 사항을 저장합니다. 그런 다음 server.js 파일을 편집합니다.

nano /config/server.js

server.js 구성 파일은 아래 나열된 구성과 유사해야 합니다 ( "domain.com"을 도메인으로 바꾸고 비밀 속성에 배치 할 JWT를 생성해야 합니다).

{
  host: '0.0.0.0',
  port: 1337,
  url: 'https://domain.com/api',
  admin: {
    url: 'https://domain.com/dashboard',
    auth: {
      secret: "enter-your-jwt-here",
    },
  },
}

6.2 단계-Strapi의 프로덕션 빌드 생성 및 실행

이제 MongoDB 및 Nginx와 함께 작동하도록 Strapi를 구성 했으므로 프로덕션 빌드를 만들고 Strapi를 실행할 준비가 되었습니다.

npm run strapi build

그런 다음 해당 빌드를 사용하여 strapi를 시작합니다.

npm run strapi start

strapi를 시작하면 아래와 비슷한 메시지가 나타납니다.

Project information

┌────────────────────┬──────────────────────────────────────────────────┐
│ Time               │ Mon Aug 24 2020 19:13:10 GMT-0500 (Central Dayl… │
│ Launched in        │ 25432 ms                                         │
│ Environment        │ development                                      │
│ Process PID        │ 17512                                            │
│ Version            │ 3.1.3 (node v12.16.1)                            │
│ Edition            │ Community                                        │
└────────────────────┴──────────────────────────────────────────────────┘

 Actions available

Welcome back!
To manage your project ?, go to the administration panel at:
http://localhost/api/admin

To access the server ⚡️, go to:
http://localhost/api

Strapi에 로그인하려면 선택한 브라우저에서 다음 웹 페이지를 방문하십시오.

https://domain.com/dashboard

가입 페이지가 나타나면 원하는 이메일과 비밀번호를 입력하고 가입해야 합니다. 새 가입으로 로그인하면 Strapi 대시 보드가 표시됩니다.

Alt Text

Strapi 설정에 대한 튜토리얼을 보려면 아래 이미지를 클릭하십시오.

Alt Text

일부 유형을 설정하고 일부 데이터를 입력 한 후 도메인으로 이동 한 다음 유형 이름을 입력하여 선택한 브라우저에서 데이터를 가져옵니다 ( "type-goes-here"를 유형 이름으로 대체).

https://domain.com/api/type-goes-here

일부 데이터를 입력하고 컬렉션 유형을 올바르게 입력했다고 가정하면 다음 JSON과 유사한 응답을 받아야 합니다.

Alt Text

결론

이제 Nginx를 사용하여 두 개의 상용구 (React 및 Strapi)를 설정 했으므로 두 가지를 구현할 방법을 결정할 수 있습니다. 바라건대,이 튜토리얼은 따라하기 쉬웠고 이 시점까지 문제가 없었기를 바랍니다. 이것이 나의 첫 번째 기사 / 튜토리얼이므로 아래 의견에 저에게 제안 사항을 남겨주세요.