部署 React 應用

部署 React 應用

部署 React 應用可以將你的開發項目上線，並讓其他用戶通過網絡訪問。在這裡，我們將介紹如何將 React 應用部署到不同的平台，例如靜態網站托管服務（如 Netlify、Vercel）、傳統的伺服器（如 Nginx），以及使用 Docker 部署。

---

1. 應用構建

在部署之前，首先需要構建你的 React 應用，這會將應用打包成靜態資源。

1.1 使用 Create React App 構建

假設你是通過 Create React App 創建的 React 應用，可以通過以下命令進行構建：

npm run build

這會在專案目錄中生成一個名為 build 的文件夾，裡面包含靜態 HTML、CSS 和 JavaScript 文件，可以直接部署到伺服器或托管平台。

---

2. 部署到靜態網站托管平台

2.1 部署到 Netlify

Netlify 是一個流行的免費靜態網站托管平台，支持自動構建和部署 React 應用。

1. 登錄 Netlify：前往 Netlify 並登錄或註冊。
2. 創建新網站：
   • 點擊 “New site from Git”。
   • 選擇你的 Git 提供商（例如 GitHub）。
   • 授權 Netlify 訪問你的 Git 倉庫並選擇要部署的專案。
3. 構建設置：
   • 設置構建命令為 npm run build。
   • 指定發佈目錄為 build。
4. 完成部署：點擊 “Deploy site”，Netlify 會自動構建並部署你的 React 應用。每當你推送代碼更新時，Netlify 會自動重新部署應用。

2.2 部署到 Vercel

Vercel 是另一個熱門的靜態網站托管平台，特別適合用於部署前端框架如 React、Next.js。

1. 登錄 Vercel：訪問 Vercel 並登錄或註冊。
2. 導入專案：
   • 點擊 “New Project”。
   • 連接你的 GitHub、GitLab 或 Bitbucket 賬號，並選擇一個倉庫。
3. 構建設置：
   • Vercel 通常會自動檢測 React 應用並設置構建命令為 npm run build。
4. 部署：Vercel 會自動部署並生成一個網站 URL，你可以通過此 URL 訪問你的應用。

---

3. 部署到 Nginx 伺服器

如果你有自己的伺服器（例如 VPS 或雲服務器），你可以使用 Nginx 來部署 React 應用。

3.1 配置 Nginx

1. 構建應用：首先，確保你的 React 應用已經使用 npm run build 進行構建。
2. 上傳文件：將 build 文件夾上傳到你的伺服器上的某個目錄中（例如 /var/www/my-react-app）。
3. 配置 Nginx：在伺服器上打開或創建一個 Nginx 配置文件，配置如下：

server {
    listen 80;
    server_name your-domain.com;

    root /var/www/my-react-app/build;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

1. 重新加載 Nginx：

sudo systemctl reload nginx

這將讓 Nginx 在訪問你的域名時，提供 React 應用的靜態資源。

---

4. 使用 Docker 部署

Docker 是一個容器化工具，可以將應用及其依賴項打包到一個容器中，這樣應用可以在任何支持 Docker 的伺服器上運行。

4.1 創建 Dockerfile

在你的 React 項目根目錄下創建一個名為 Dockerfile 的文件：

# 使用官方的 Node.js 映像作為基礎映像
FROM node:14-alpine

# 設置工作目錄
WORKDIR /app

# 複製 package.json 並安裝依賴
COPY package.json ./
RUN npm install

# 複製項目文件
COPY . .

# 構建應用
RUN npm run build

# 使用 Nginx 作為 Web 伺服器
FROM nginx:alpine
COPY --from=0 /app/build /usr/share/nginx/html

# 暴露 Nginx 的默認端口
EXPOSE 80

# 啟動 Nginx
CMD ["nginx", "-g", "daemon off;"]

4.2 構建 Docker 映像

執行以下命令來構建 Docker 映像：

docker build -t my-react-app .

4.3 運行 Docker 容器

構建完成後，使用以下命令運行容器：

docker run -p 80:80 my-react-app

這樣，你的 React 應用將運行在 Docker 容器中，並通過伺服器的 80 端口訪問。

---

5. 部署到其他平台

除了 Netlify、Vercel 和 Nginx，還有許多其他平台可以用來部署 React 應用：

• GitHub Pages：適合小型靜態網站，React 應用可以部署到 GitHub Pages，並通過 GitHub 提供的免費域名訪問。
• Amazon S3 + CloudFront：適合企業級應用，Amazon S3 可以作為靜態網站托管，CloudFront 可以提供全球內容分發加速。

---

6. 總結

• Netlify 和 Vercel 是簡單且快速的選擇，適合快速部署 React 應用。
• Nginx 伺服器部署適合更具定制化需求的情況，尤其是當你擁有自己的伺服器時。
• Docker 是將應用封裝到容器中的好選擇，能夠保證應用在各種環境中一致運行。

無論選擇哪種部署方式，最終目的是將應用上線並讓用戶可以通過互聯網訪問。