前言

Vercel是一間雲服務廠商，我們可以透過它免費部署我們的程式碼
這樣就能有 domain 讓其他人訪問
不用自己租一台伺服器(還要處理域名綁定等相對複雜的事情)
很適合用在專題發表~

更方便的是它能和 github 綁定，只要授權repo後就能自動部署! (git push => 網站自動部署)

假設今天單純想要練習後端程式甚至沒有要連接DB
那我們要怎麼設定變數呢?
畢竟有些私密的金鑰不想上傳到 github 上面

今天來學習怎麼在 Vercel 設定環境變數~ 圖多!

說明

第一次部署

選要匯入的github

可以先不設定環境變數直接點 deploy

沒錯就是這麼簡單，等幾秒就好了

這是預覽，這邊很重要，位置要記好✨ ⇒ 最右邊有個 Settings

這是detail >> 點visit

看到成果囉(因為沒設定環境變數，所以是預設值)

修改變數

✨首先回到剛剛的預覽>>Settings
看到環境變數
複製你的VScode .env 貼到這邊 >> 按下儲存 (不會馬上生效)

到detail >> 重新部署 (Redeploy)

部署完成~設定檔案生效了

附上範例repo

https://github.com/dpes8693/vercel-deploy-express-example

只要看4個檔案

.env 設定檔(空值即可)

APP_VARIABLE_1=""
APP_VARIABLE_2=""
APP_VARIABLE_3=""

config/index.js 程式環境變數

import dotenv from "dotenv";

const { env } = process;
dotenv.config({
  path: ".env",
});

//凍結變數並設定預設值
const config = Object.freeze({
  APP_VARIABLE_1: env.APP_VARIABLE_1 === "true" || false,
  APP_VARIABLE_2: Number(env.APP_VARIABLE_2) || 1,
  APP_VARIABLE_3: env.APP_VARIABLE_3 || "",
});

export default config;

api/index.js

簡易api方便測試我們變數是否有設定成功

import express from "express";
import globalConfig from "../config/index.js";

const app = express();
app.get("/", (req, res) =>
  res.send(`Hello World! ${JSON.stringify(globalConfig)}`)
);

// node ./api/index.js
app.listen(3001, () => console.log("http://localhost:3001/"));

vercel.json 部署設定

{
  "rewrites": [{ "source": "/(.*)", "destination": "/api" }]
}

上面是將網址重指向
原本: https://vercel-deploy-express-example.vercel.app/api 才能訪問
現在: https://vercel-deploy-express-example.vercel.app/ 就能訪問

小結

希望幫助到想要部署動態網站的朋友們~

採坑: 在 Vercel 設定檔加上 CORS 無效
https://vercel.com/guides/how-to-enable-cors#enabling-cors-in-a-next.js-app