Ben Ben Blog.

建立我的第一個Blog - part 2: ENV 設定

Next.js 和 Strapi ENV 設定

前言

這篇文章會主要介紹我如何為我的Blog分別建立prodoction和dev環境

Strapi 環境變數設定

這個是上一篇文章中CLI預設的.env

# Server
HOST=0.0.0.0
PORT=1337

# Secrets
APP_KEYS=
API_TOKEN_SALT=
ADMIN_JWT_SECRET=
TRANSFER_TOKEN_SALT=

# Database
DATABASE_CLIENT=postgres
DATABASE_HOST=strapiDB
DATABASE_PORT=5432
DATABASE_NAME=strapi
DATABASE_USERNAME=admin
DATABASE_PASSWORD=admin
DATABASE_SSL=false
JWT_SECRET=

然後我們Copy一個.env.prod，修改一下port和database 的connect

NODE_ENV=production
# Server
HOST=0.0.0.0
PORT=1338

# Secrets
APP_KEYS=
API_TOKEN_SALT=
ADMIN_JWT_SECRET=
TRANSFER_TOKEN_SALT=

# Database
DATABASE_CLIENT=postgres
DATABASE_HOST=strapiDB
DATABASE_PORT=5433
DATABASE_NAME=strapi
DATABASE_USERNAME=admin
DATABASE_PASSWORD=admin
DATABASE_SSL=false
JWT_SECRET=

主要是改:

  • DATABASE_PORT
  • PORT

Next.js 環境變數設定

Next.js 這邊並沒有建立預設的.env file。

我們需要自行建立以下檔案 .env.development .env.development.local .env.production

然後自行填上token和你的strapi的domain

STRAPI_API_TOKEN=
NEXT_PUBLIC_STRAPI_URL=

這邊.local的就要填上localhost以連上自己本機的strapi server .env.development.local 

STRAPI_API_TOKEN=<YOUR_STRAPI_TOKEN>
NEXT_PUBLIC_STRAPI_URL=http://localhost:1337

Strapi token

strapi 的token 主要用來給Strapi 外部的服務透過REST / GraphQL api 來存取strapi的資料，我們可以利用這個token來控制這些服務的權限

取得 Strapi api token

前往setting > Api Tokens create api token

duration: unlimited token type: read-only

然後就可以先save，就會給你一串token，把他複製起來，並放到Next.js .env.development.local的STRAPI_API_TOKEN strapi token

之後就可以進到webfolder運行一下命令啓動

yarn dev

看到Environments: .env.development.local, .env.development就是設定成功了！ run yarn dev result 更多關於Next.js ENV 設定可以去 https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables

TODO

環境設定先到這邊，下一篇我會介紹如何使用docker 和docker compose 去同搭建dev 和production 環境，並引用我們這篇建立的.env檔。

  • 用docker建立strapi image
  • 用docker compose deploy包含strapi+postgreSQL的 DEV 和 PRODUCTION 環境
  • 用Github action 做CD Deploy (self-hosted runner)
  • CD Deploy web to Vercel
  • Vercel 接Cloudflare domain

寫文章挺累的