LearningSky.io

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

Archer -

前言

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

內容

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

學習目標

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

前置準備作業

專案最終目錄結構

└── react-sample
    ├── Dockerfile
    ├── README.md
    ├── build
    │   ├── asset-manifest.json
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   ├── robots.txt
    │   └── static
    │       ├── css
    │       │   ├── main.073c9b0a.css
    │       │   └── main.073c9b0a.css.map
    │       ├── js
    │       │   ├── 787.2c438de5.chunk.js
    │       │   ├── 787.2c438de5.chunk.js.map
    │       │   ├── main.2f5f9581.js
    │       │   ├── main.2f5f9581.js.LICENSE.txt
    │       │   └── main.2f5f9581.js.map
    │       └── media
    │           └── logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg
    ├── fly.toml → 執行完 flyctl 指令後會產生
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   └── robots.txt
    ├── node_modules
    └── src
        ├── App.css
        ├── App.js
        ├── App.test.js
        ├── index.css
        ├── index.js
        ├── logo.svg
        ├── reportWebVitals.js
        └── setupTests.js

編譯 App

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

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

    npm start

Step 2. 編譯 Vue App

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

    npm run build

Step 3. 驗證編譯結果

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

    serve -s build

撰寫 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

List of blogs