Ubuntu 22.04 LTS에서 Nuxt.js 웹 애플리케이션 설정 및 배포

환경 준비

드롭릿이 준비되었고 SSH로 서버에 로그인했다고 가정합니다. 또한 이 가이드의 다음 부분에 있는 모든 명령은 루트가 없는 사용자로 실행한다고 가정합니다. 그럼 우리는 갈 준비가 된 것입니다.

우선 모든 패키지를 업데이트했는지 확인하십시오.

sudo apt update && sudo apt upgrade -y 

그런 다음 노드 js와 npm을 설치해야 합니다.

sudo apt install nodejs npm

다음을 통해 노드 js 버전 확인

node -v

최신 버전이 아닌 경우 다음을 통해 업그레이드할 수 있습니다.

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

또는 최신 버전을 설치하려면 sudo n latest 대신 sudo n stable를 실행할 수 있습니다.
yarn 대신 npm를 선호하는 경우 다음을 통해 설치할 수 있습니다.

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update 
sudo apt install yarn

위의 명령은 Node.js도 설치합니다. nvm을 통해 Node를 설치한 경우 다음을 사용하여 Node.js 설치를 건너뜁니다.

sudo apt install --no-install-recommends yarn

원사 버전 확인

yarn --version

그런 다음 nuxt 애플리케이션을 서버로 가져와야 합니다. 따라서 두 가지 방법이 가능합니다. github에서 프로젝트를 복제하거나 터미널을 통해 프로젝트를 서버로 직접 복사할 수 있습니다. 두 가지 다른 옵션을 보여 드리겠습니다. 원하는 경우 이 섹션을 건너뛸 수 있습니다.

Github에서

git clone <your repo link>

github 계정에서 인증을 위해 ssh 키를 사용하는 경우. ssh 키를 생성하고 github 계정을 추가해야 합니다.

이 명령으로 ssh 키 생성

ssh-keygen 

이 명령으로 ssh 키를 표시할 수 있습니다.

cat /home/<your host name>/.ssh/id_rsa.pub

또는 다음과 같은 줄을 볼 수 있습니다 Your public key has been saved in /home/sium/.ssh/id_rsa.pub . 줄 앞부분에 add cat 명령 줄을 복사하십시오. 마지막으로 github 계정에 이 줄을 추가합니다.

보안 사본 사용

scp -r /path/to/your/local/project/* your-user-name@<droplet-ip-here>:~/your-project-name/

이제 프로젝트를 서버로 가져올 수 있기를 바랍니다.

이제 package-lock.json 파일이 있는 프로젝트 디렉토리로 이동하여 다음을 통해 모든 종속성 및 빌드 명령을 설치하십시오.

npm install 
npm run build

이제 더 많은 자동화가 필요합니다. 따라서 애플리케이션을 매번 시작할 필요가 없습니다.
우리는 PM2 — node.js 프로세스 관리자를 사용할 것입니다. 그것을 설치하십시오:

sudo npm install pm2 -g

pm2 start npm -- start 

이제 nginx를 설치해야 합니다.

sudo apt install nginx

다음으로 우리는 하나의 프로젝트에 대한 기본 구성을 생성하지만 나중에 이를 복제하고 하나의 드롭릿에서 다양한 node.js 애플리케이션 및 도메인을 실행할 수 있습니다.

sudo nano /etc/nginx/sites-available/your-domain-name.com

이 파일에 다음 내용을 입력합니다("your-domain-name.com"구문을 실제 도메인 이름으로 변경해야 함).

server {
    listen 80;
    listen [::]:80;
    index index.html;
    server_name your-domain-name.com www.your-domain-name.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

이제 기본 http 80 포트에서 your-domain.com으로 들어오는 모든 트래픽이 localhost:3000으로 리디렉션됩니다.

그리고 새 구성 파일을 사이트 사용 가능 디렉토리에 연결합니다.

sudo ln -sf /etc/nginx/sites-available/your-domain-name.com /etc/nginx/sites-enabled/your-domain-name.com

마지막으로 다음을 통해 nginx 파일에 오류가 없는지 확인할 수 있습니다.

sudo nginx -t
sudo systemctl restart nginx

그리고 마침내 이제 우리는 우리의 욕망 도메인에 대한 NUXT 애플리케이션을 볼 수 있습니다. 하지만 안전하지 않습니다. Let's encrypt로 보안을 설정합시다.

sudo apt install python3-certbot-nginx

암호화하기 전에 디지털 바다의 dns 설정 또는 이와 같이 모든 레코드를 등록했는지 확인하십시오.

sudo certbot --nginx -d your-domain-name.com -d www.your-domain-name.com

리디렉션하시겠습니까?라는 메시지가 표시되면 옵션2을 선택합니다. blah blah blah.
그럼 드디어 실행

sudo certbot renew --dry-run

짜잔!!!!!! 우리는 해냈다......