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

【 Cloud 】部署 React App 到 Fly.io 雲端平台
Photo by Sandy Ravaloniaina / Unsplash

前言

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

內容

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

學習目標

  • 如何部署 React AppFly.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
    

    ---2022-08-31---1.37.47

    ---2022-08-31---1.37.20


Step 2. 編譯 Vue App

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

    npm run build
    

    ---2022-08-31---1.38.47


Step 3. 驗證編譯結果

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

    serve -s build
    

    ---2022-08-31---1.37.20

撰寫 Dockerfile 檔

Step 1. 建立 Dockerfile

部署 App 到 Fly.io

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

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

    flyctl auth login
    

    ---2022-08-31---10.16.13

    ---2022-08-31---10.16.57

    ---2022-08-31---10.17.56


Step 2. 建立 App

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

    flyctl launch
    

    ---2022-08-31---1.40.52


Step 3. 修改 internal_port

  • 修改 fly.toml 檔案裡 services 中的 internal_port8043
    • 原始內容

    • 修改後內容


Step 4. 部署 App 到 Fly.io

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

    flyctl deploy
    

    ---2022-08-31---1.51.32


Step 5. 查看部署狀態

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

    flyctl status
    

    ---2022-08-31---1.52.38


Step 6. 開啟 App

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

    flyctl open
    

    ---2022-08-31---1.53.11

    ---2022-08-31---1.53.36


Step 7. 開啟 Fly.io

---2022-08-31---1.54.13

GitHub

List of blogs