Nuxt — 網站建置與佈署 Part 2
上一篇 Nuxt — 網站建置與佈署 Part 1 已經準備好環境和必要的工具,這次我們要讓網站可以運作起來!
環境:Ubuntu
版控:Bitbucket
利用 git 下載程式碼到 vm
首先我們需要新增一組給 Bitbucket 使用的 SSH Key,這樣子我們才有權限下載 code 到 vm 上。
- 連進 vm 後,我們使用
sudo -s
使用超級用戶來執行後面的指令 - 新增 ssh key
ssh-keygen -t rsa -C “你的信箱”
,接著到 /root 目錄cd /root
- 新增 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 上
git clone git@bitbucket.org:xxxx/yyyy.git
7. cd 到專案目錄後執行yarn install
和 yarn build
看看是否可以成功執行,若之後有新的 code 要上版,只需要執行 git pull
就可以了,當然有更動 package.json 的話也要記得再跑一次 yarn install
。
設定 Nginx
cd /etc/nginx/conf.d
新增 nginx 配置檔案 (使用 nano 來操作)。- nana {你要的名稱}.conf , 配置內容可以參考 官網 的範例,完成後重新啟動 nginx
sudo nginx -s reload
啟動 PM2 讓 Nuxt 跑起來
先前已經裝好了 PM2 ,配置好 ecosystem.config.js 後,我們接著執行 pm2 start
,讓 Nuxt 跑起來。
再用 pm2 list
查看狀態,若 status 為 online 就代表成功囉!
假如有問題的話也可以用 pm2 log
查看發生什麼事。
設定 Https ssl 憑證
- 安裝
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 自動幫你做掉這些事情!