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。
- 新增 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
- 安裝 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,有興趣的讀者可以持續關注,如有任何問題也歡迎留言喔!