AIoT & Cloud & Edge & Machine Learning

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

Archer

Aug 31, 2022 • 3 min read

Photo by Sandy Ravaloniaina / Unsplash

前言

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

內容

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

學習目標

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

前置準備作業

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

專案最終目錄結構

└── 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