將Strapi 部署到網路上吧！(Strapi介紹-後篇)

來源: https://strapi.io/documentation/3.0.0-beta.x/guides/deployment.html

前篇(快速入門)
中篇(概念架構介紹)
後篇(部署及設定)

Step 1. 更改相關設定

• 更改server相關設定
  將host以及port設為動態設定，能夠在啟動專案時透過更改環境變數的方式，設定其變數

路徑 - ./config/environments/production/server.json

{
  "host": "${process.env.APP_HOST || '127.0.0.1'}"
  "port": "${process.env.NODE_PORT || 1337}",
}

Step 2. 使用AWS S3作為資料host

不使用上傳檔案的功能可以跳過此步驟

透過AWS > 服務 搜尋S3，進入到S3的頁面，會像是以下頁面(此為已建立儲存貯體的畫面)

接著開始新增一個儲存貯體吧！
從畫面中的按鈕 +建立儲存貯體

1. 首先輸入名稱，選擇適合專案的區域

點擊下一頁

2. 設定選項

基本上不用特別勾選，依照你的專案而定

點擊下一頁

3. 設定許可(重要!!)

1. 將 封鎖所有公開存取 的核選方塊取消勾選
2. 不要勾選 封鎖透過新的存取控制清單 (ACL) 授與的對儲存貯體和物件的公開存取權
3. 不要勾選 封鎖透過任何存取控制清單 (ACL) 授與的儲存貯體和物件的公開存取權
4. 勾選 封鎖透過新的公開儲存貯體政策授與的對儲存貯體和物件的公開存取權
5. 勾選 封鎖透過任何公開儲存貯體政策授與的對儲存貯體和物件的公開和跨帳戶存取權

點擊下一頁

4. 檢閱，並點擊建立儲存貯體

儲存貯體已建立完成，接著需要在strapi中安裝aws s3的插件以及設定相關密鑰才能在strapi中使用AWS S3的服務，可以在完成後試著上傳一個檔案來測試AWS S3的功能

5. 安裝AWS S3的provider插件

npm install strapi-provider-upload-aws-s3@beta

完成後在strapi admin，選擇擴充功能中的FILES UPLOAD的設定(齒輪)
在儲存空間的選單中，會多了Amazon Web Service S3的選項就表示成功了！
而我們等一下部署到heroku再來設定Token

如下圖

Step 3. 部署到Heroku

僅介紹Heroku平台方式，原文中還有其他像是AWS, Degital Ocean…的方式
(Heroku使用的資料庫add-on為Postgres)

• 安裝及登入Heroku

安裝:

mac: brew tap heroku/brew && brew install heroku
windows: 直接使用安裝檔 64bit / 32bit
ubuntu: sudo snap install --classic heroku

登入:

heroku login來登入(或是使用heroku網站的登入也可以)

• 新建Strapi專案 / 使用既有專案

新建專案: strapi new my-project --quickstart
新建專案如要使用AWS請依照AWS S3的步驟設定

• 修改 .gitignore

將package-lock.json這行 加入.gitignore以免出錯

package-lock.json

• git 上傳

路徑 - ./你的專案/

//CLI
cd my-project //移動到專案目錄
git init //git 初始化
git add . //git 增加所有檔案
git commit -m "Initial Commit" //git 上傳並附上訊息"Initial Commit"

• 創建新的Heroku專案

路徑 - ./你的專案/
heroku create 或是自訂專案名稱 heroku create custom-project[自訂專案名稱]

• 設定Heroku的資料庫(PostgresSQL addOn 為例)

路徑 - ./你的專案/

在heroku專案新增postgresQL的插件
heroku addons:create heroku-postgresql:hobby-dev

取得資料庫相關設定
heroku config

會取得像是以下資料格式
ostgres://ebitxebvixeeqd:dc59b16dedb3a1eef84d4999sb4baf@ec2-50-37-231-192.compute-2.amazonaws.com: 5432/d516fp1u21ph7b

資料分別為 postgres:// USERNAME : PASSWORD @ HOST : PORT : DATABASE_NAME
將要依此做以下資料庫的設定，相關參數請填入你在heroku config拿到的設定

//CLI
heroku config:set DATABASE_USERNAME=ebitxebvixeeqd
heroku config:set DATABASE_PASSWORD=dc59b16dedb3a1eef84d4999a0be041bd419c474cd4a0973efc7c9339afb4baf
heroku config:set DATABASE_HOST=ec2-50-37-231-192.compute-2.amazonaws.com
heroku config:set DATABASE_PORT=5432
heroku config:set DATABASE_NAME=d516fp1u21ph7b

• 更新 strapi資料庫檔案的設定

路徑 - ./你的專案/config/environments/production/database.json

{
  "defaultConnection": "default",
  "connections": {
    "default": {
      "connector": "strapi-hook-bookshelf",
      "settings": {
        "client": "postgres",
        "host": "${process.env.DATABASE_HOST}",
        "port": "${process.env.DATABASE_PORT}",
        "database": "${process.env.DATABASE_NAME}",
        "username": "${process.env.DATABASE_USERNAME}",
        "password": "${process.env.DATABASE_PASSWORD}",
        "ssl": true
      },
      "options": {}
    }
  }
}

• 安裝pg(postgres套件)

路徑 - ./你的專案/
npm install pg --save

• 上傳剛剛更新的修改，完成！！

//CLI
git add .
git commit -m "Update database config"
git push heroku master //推到master分支並發布到heroku

heroku open //開啟此專案的網站！

• 接著你就可以在已部署的網頁中取得API了

使用方法與localhost方法一樣，只是網址改為heroku專案的網址

如果403 forbidden，admin 頁面中的身份與權限，有相關API使用的設定，詳見前篇(快速入門)
如需無法使用graphQL，請安裝graphQL插件並修改其設定檔，詳見前篇(快速入門)

• 補充設定AWS S3(可以跳過)

  • 在AWS右上角找你的帳號，並從選單中點擊我的安全登入資料
  • 在您的安全登入資料頁面中，點開存取金鑰，並點擊建立新的存取金鑰
  • 在跳窗中會有 存取金鑰ID(Access API Token)以及私密存取金鑰(Secret Access Token)，這兩組金鑰將會用於FILES UPLOAD的設定(請詳記或是不要關掉AWS跳窗)
  • 接著在你已發佈的Heroku專案的Strapi admin網頁中，在左邊找到並點擊擴充功能
  • 在擴充功能中找到FILES UPLOAD並點擊齒輪來設定，在儲存空間的下拉選單選擇Amazon Web Service S3
  • 在Access API Token和Secret Access Token分別填入剛剛拿到的金鑰，Region選擇你在AWS S3中選擇的區域(預設是us-east-2)，最後在Bucket填入你儲存貯體的名稱
  • 完成並可以測試上傳！

測試上傳：

• 點擊Heroku專案中的strapi admin左邊的檔案上傳，並上傳一個圖片
• 上傳成功後，在你AWS S3的頁面中，點擊你專案的儲存貯體，看到有一個新圖片就代表成功了！
  (如果AWS S3沒成功，請先在AWS S3上傳一個檔案，或是依照之前的設定重新設定一次)

步驟圖示說明

點擊我的安全登入資料

點擊存取金鑰，並建立新的存取金鑰

填入金鑰和其他東西(要選擇production的tab)

上傳成功！

//CLI
git add .
git commit -m "strapi project changed..."
git push heroku master //發布到heroku

heroku open //開啟此專案的網站！