Nuxt — 網站建置與佈署 Part 2

上一篇 Nuxt — 網站建置與佈署 Part 1 已經準備好環境和必要的工具,這次我們要讓網站可以運作起來!

環境:Ubuntu

版控:Bitbucket

利用 git 下載程式碼到 vm

首先我們需要新增一組給 Bitbucket 使用的 SSH Key,這樣子我們才有權限下載 code 到 vm 上。

  1. 連進 vm 後,我們使用 sudo -s 使用超級用戶來執行後面的指令
  2. 新增 ssh key ssh-keygen -t rsa -C “你的信箱” ,接著到 /root 目錄 cd /root
  3. 新增 key 到 ssh-agent
  • eval ssh-agent
  • ssh-add ~/.ssh/<private_key_file>

4. cat ~/.ssh/<public_key_file> 複製公鑰到 Bitbucket(個人)新增 SSH key

5. 驗證配置及用戶 ssh -T git@bitbucket.org

conq: logged in as <username>. You can use git or hg to connect to Bitbucket. Shell access is disabled.

看到此訊息代表驗證就成功了

6. 最後我們回到使用者目錄下載專案到 vm 上

7. cd 到專案目錄後執行yarn installyarn build 看看是否可以成功執行,若之後有新的 code 要上版,只需要執行 git pull 就可以了,當然有更動 package.json 的話也要記得再跑一次 yarn install

設定 Nginx

  1. cd /etc/nginx/conf.d新增 nginx 配置檔案 (使用 nano 來操作)。
  2. nana {你要的名稱}.conf , 配置內容可以參考 官網 的範例,完成後重新啟動 nginx sudo nginx -s reload

啟動 PM2 讓 Nuxt 跑起來

先前已經裝好了 PM2 ,配置好 ecosystem.config.js 後,我們接著執行 pm2 start,讓 Nuxt 跑起來。

再用 pm2 list 查看狀態,若 status 為 online 就代表成功囉!

假如有問題的話也可以用 pm2 log 查看發生什麼事。

設定 Https ssl 憑證

  1. 安裝 certbot
sudo apt-get install software-properties-common # 載入 certbot 的 ppa
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
sudo apt-get install python-certbot-nginx # 安裝 python 的 certbot for nginx````

2. sudo certbot --nginx 產生憑證

3. sudo nginx -s reload 重新整理 nginx

4. 最後到網站查看是不是可以用 https 就可以了

5. 若之後憑證快到期可以執行 sudo certbot renew 做憑證續約動作

結語

這篇快速介紹在 vm 環境讓網站整個跑起來的流程,但只要有更新程式碼就必須連進 vm 裡再跑一次指令,下一篇就會介紹使用 ci /cd 自動幫你做掉這些事情!

--

--