【 Cloud 】部署 Vue App 到 Fly.io 雲端平台

前言

• 因 Heroku 雲端平台將終止部分服務的免費使用額度，故轉移 App 到目前提供免費額度的 Fly.io 雲端平台。

內容

• 學習目標
• 前置準備作業
• 專案最終目錄結構
• 編譯 App
• 撰寫 Dockerfile 檔
• 部署 App 到 Fly.io

學習目標

• 如何部署 Vue App 到 Fly.io 雲端平台

前置準備作業

• 已建立 Fly.io 帳號並能正常登入
  • Fly.io 的網址為 https://fly.io/
• 電腦端存在可正常執行的 Vue App
• 已於電腦端安裝 IDE，本範例使用 Visual Studio Code
• 已於電腦端安裝 flyctl
  • https://fly.io/docs/hands-on/install-flyctl/

專案最終目錄結構

└── vue-sample
    ├── Dockerfile
    ├── README.md
    ├── babel.config.js
    ├── dist
    │   ├── css
    │   │   └── app.2cf79ad6.css
    │   ├── favicon.ico
    │   ├── index.html
    │   └── js
    │       ├── app.ee4f37a8.js
    │       ├── app.ee4f37a8.js.map
    │       ├── chunk-vendors.bb33462f.js
    │       └── chunk-vendors.bb33462f.js.map
    ├── fly.toml → 執行完 flyctl 指令後會產生
    ├── jsconfig.json
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   ├── components
    │   │   └── HelloWorld.vue
    │   └── main.js
    ├── node_modules
    └── vue.config.js

編譯 App

Step 1. 驗證 Vue App 是否可正常執行

• 請在終端機輸入下方指令

  npm run serve
  

  

  

Step 2. 編譯 Vue App

• 請在終端機輸入下方指令

  npm run build
  

  

Step 3. 驗證編譯結果

• 請在終端機輸入下方指令

  serve -s dist
  

  

  

撰寫 Dockerfile 檔

Step 1. 建立 Dockerfile

部署 App 到 Fly.io

Step 1. 透過 flyctl 登入到 Fly.io

• 請在終端機輸入下方指令

  flyctl auth login
  

  

  

  

Step 2. 建立 App

• 請在終端機輸入下方指令

  flyctl launch
  

  

Step 3. 修改 internal_port

• 修改 fly.toml 檔案裡 services 中的 internal_port 為 8043

  • 原始內容

  • 修改後內容

Step 4. 部署 App 到 Fly.io

• 請在終端機輸入下方指令

  flyctl deploy
  

  

Step 5. 查看部署狀態

• 請在終端機輸入下方指令

  flyctl status
  

  

Step 6. 開啟 App

• 請在終端機輸入下方指令

  flyctl open
  

  

  

Step 7. 開啟 Fly.io

GitHub

• ArcherHuang @ GitHub

List of blogs

• https://oranwind.org/author/archer/
• https://learningsky.io/author/archer/