Nuxt - 網站建置與佈署 Part 1

相信有用 Vue 做 SSR 的網站的工程師都對 Nuxt 都不會太陌生，但要如何建置網站發佈到線上呢？這篇會使用 GCP 介紹 Nuxt 網站的建置給前端新手參考。( 🚧 文章皆使用 macOS 作為範例 )

Server 建立

Server 的部分會使用 GCP 的 Compute Engine 建置。

1. 選擇「VM執行個體」並新增一個 VM 執行個體

2. 「區域」可以選擇台灣、「名稱」及「機器設定」可依照個人需求調整。

3. 「開機磁碟」這篇教學會使用 Ubuntu

4. 完成後就會在列表看到剛剛建立的 VM 執行個體

連線 VM

建立好 Server 後我們需要連線至 VM 安裝需要的軟體，接下來會教大家在本地用 公開金鑰加密 的方式連線至 VM 。

Public Key：存放 Server 端

Private Key：存放 Client 端，用來解密 Server 的 Public Key。

1. 新增 Public key 到 GCE

• 打開終端機 輸入ssh-keygen -t rsa -C "你的信箱"
• cat ~/.ssh/id_rsa.pub 複製剛剛新增的 Public key

2. 新增 Public key 到 GCE 上的「中繼資料」-「安全殼層金鑰」

• 在 Public key 最後手動加上你的信箱 (如下圖)

3. 打開終端機測試連線至 VM

ssh <user>@<ip>

• user: 信箱的帳號，假如信箱是 peerone@gmail.com， user 就會是 peerone
• ip: 即 VM 的對外 IP ，可以到 「VM執行個體」的 「外部 IP」取得

4. 最後看到類似的畫面就代表登入成功了

補充: 如果有使用 VSCode 的話，推薦使用 Remote — SSH 來連線

安裝 Node.js、PM2、Git、Nginx

1. 安裝 Node.js 之前需要先裝 nvm (方便管理 Node.js)

安裝 nvm: wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

安裝完後需要重新連線至 VM 並輸入 nvm - -version 來確認有安裝成功。

2. 安裝 node.js nvm install 10.16.3 (可自行選擇版本號)

3. 安裝 yarn

• 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

4. 安裝 PM2 yarn global add pm2

5. 安裝 git

• sudo apt update
• sudo apt install git

6. 安裝 nginx

• sudo apt update
• sudo apt install nginx

7. 最後因為 CI/CD 跑指令時，可能會出現找不到 PM2、Nginx、npm 的錯誤訊息所以我們要先把 PM2、Nginx、npm 加到全域上。(也可以之後再做此步驟)

把 PM2 Node npm 加到全域
sudo ln -s /home/username/.nvm/versions/node/v10.16.3/bin/node /usr/local/bin/node
sudo ln -s /home/username/.nvm/versions/node/v10.16.3/bin/npm /usr/local/bin/npm
sudo ln -s /home/username/.nvm/versions/node/v10.16.3/bin/pm2 /usr/bin/pm2

結語

這次我們建立好 VM 並安裝必要的軟體，下一篇將會介紹如何把程式下載到 VM 上並使用 PM2 讓 Nuxt 網站可以跑起來以及 Nginx 和 Https 的配置。整個網站建置介紹完後也會教讀者使用 Bitbucket Pipeline & Circle Ci 處理 CI/CD，有興趣的讀者可以持續關注，如有任何問題也歡迎留言喔！