小編精選 - 技術文章翻譯 · 08月18日

檔案架構範例：javascript 前端 + 後端

設定生產級全端 Node.js 專案不僅涉及編寫程式碼。它需要仔細的規劃、強大的架構以及遵守最佳實務。本指南將引導您完成使用 Node.js、Express 和 React 建立可擴展、可維護且安全的全端應用程式的過程。

無論您是希望了解生產級設定的初學者，還是旨在完善專案結構的經驗豐富的開發人員，本指南都將為建立專業級應用程式提供寶貴的見解。

先決條件

在開始之前，請確保您的系統上安裝了以下軟體：

Node.js（最新 LTS 版本）
npm（節點套件管理器，Node.js 附帶）
Git（用於版本控制）

如何設定全端應用程式

一、專案結構

組織良好的專案結構對於可維護性和可擴展性至關重要。以下是全端 Node.js 專案的推薦結構：

project-root/
├── server/
│   ├── src/
│   │   ├── config/
│   │   ├── controllers/
│   │   ├── models/
│   │   ├── routes/
│   │   ├── services/
│   │   ├── utils/
│   │   └── app.js
│   ├── tests/
│   ├── .env.example
│   └── package.json
├── client/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── services/
│   │   ├── utils/
│   │   └── App.js
│   ├── .env.example
│   └── package.json
├── .gitignore
├── docker-compose.yml
└── README.md

解釋：

server目錄包含所有與後端相關的程式碼。
client目錄包含前端應用程式。
在後端分離關注點（控制器、模型、路由）可以促進模組化。
.env.example檔案用作環境變數的模板。
Docker 配置允許一致的開發和部署環境。

2. 後台設定

設定強大的後端對於生產級應用程式至關重要。這是逐步指南：

初始化專案：

   mkdir server && cd server
   npm init -y

安裝必要的依賴項：

   npm i express mongoose dotenv helmet cors winston
   npm i -D nodemon jest supertest

建立主應用程式檔案（ src/app.js ）：

   const express = require('express');
   const helmet = require('helmet');
   const cors = require('cors');
   const routes = require('./routes');
   const errorHandler = require('./middleware/errorHandler');

   const app = express();

   app.use(helmet());
   app.use(cors());
   app.use(express.json());

   app.use('/api', routes);

   app.use(errorHandler);

   module.exports = app;

解釋：

使用express作為Web框架。
helmet新增了與安全性相關的 HTTP 標頭。
cors支援跨來源資源共享。
模組化路由和錯誤處理可以改善程式碼組織。

3. 前端設定

結構良好的前端對於流暢的使用者體驗至關重要：

建立一個新的 React 應用程式：

   npx create-react-app client
   cd client

安裝附加套件：

   npm i axios react-router-dom

設定 API 服務 ( src/services/api.js )：

   import axios from 'axios';

   const api = axios.create({
     baseURL: process.env.REACT_APP_API_URL || 'http://localhost:5000/api',
   });

   export default api;

解釋：

使用 Create React App 為最佳實踐奠定了堅實的基礎。
axios簡化了 API 呼叫。
集中 API 配置使管理端點變得更加容易。

4. Docker 設定

Docker 確保開發、測試和生產環境的一致性：

在專案根目錄中建立docker-compose.yml ：

version: '3.8'
services:
  server:
    build: ./server
    ports:
      - "5000:5000"
    environment:
      - NODE_ENV=production
      - MONGODB_URI=mongodb://mongo:27017/your_database
    depends_on:
      - mongo

  client:
    build: ./client
    ports:
      - "3000:3000"

  mongo:
    image: mongo
    volumes:
      - mongo-data:/data/db

volumes:
  mongo-data:

解釋：

定義後端、前端和資料庫的服務。
使用環境變數進行配置。
使用磁碟區保存資料庫資料。

5. 測試

實施全面測試以確保可靠性：

後端測試（ server/tests/app.test.js ）：

   const request = require('supertest');
   const app = require('../src/app');

   describe('App', () => {
     it('should respond to health check', async () => {
       const res = await request(app).get('/api/health');
       expect(res.statusCode).toBe(200);
     });
   });

前端測試：利用 React 測試庫進行元件測試。

解釋：

後端測試使用 Jest 和 Supertest 進行 API 測試。
前端測試確保元件渲染和行為正確。

6. CI/CD 管道

使用 CI/CD 管道自動化測試和部署。以下是使用 GitHub Actions 的範例：

name: CI/CD

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14.x'
    - run: cd server && npm ci
    - run: cd server && npm test
    - run: cd client && npm ci
    - run: cd client && npm test

  deploy:
    needs: test
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'
    steps:
    - name: Deploy to production
      run: |
        # Add your deployment script here

解釋：

自動對推送和拉取請求執行測試。
在主分支上成功測試後部署到生產環境。

7. 安全最佳實踐

使用頭盔設定安全 HTTP 標頭
實施速率限制
在生產中使用 HTTPS
清理使用者輸入
實施適當的身份驗證和授權

8. 效能優化

使用壓縮中間件

實施快取策略

最佳化資料庫查詢

使用 PM2 或類似產品進行生產流程管理

下一步

實施身份驗證（JWT、OAuth）

設定資料庫遷移

實施日誌記錄和監控

為靜態資產配置CDN

設定錯誤追蹤（例如 Sentry）

請記住，切勿提交 API 金鑰或資料庫憑證等敏感資訊。使用環境變數進行配置。

結論

設定生產級全端 Node.js 專案需要專注於細節並遵守最佳實踐。透過遵循本指南，您已經為可擴展、可維護且安全的應用程式奠定了基礎。請記住，這是一個起點 - 隨著您的專案的發展，您可能需要調整和擴展這些實踐以滿足您的特定需求。

常見問題解答

1. 為什麼要使用Docker進行開發？

Docker 確保不同開發環境之間的一致性，簡化新團隊成員的設置，並密切模仿生產環境。

2. 如何安全地處理環境變數？

使用.env檔案進行本地開發，但切勿將這些文件提交到版本控制。對於生產，請使用託管平台提供的環境變數。

3.前後端分離有什麼好處？

這種分離允許獨立擴展、更容易維護，並且可以為堆疊的每個部分使用不同的技術。

4. 如何確保我的應用程式安全？ **

實施身份驗證和授權、使用 HTTPS、清理使用者輸入、保持依賴項更新並遵循 OWASP 安全指南。

5. 對於生產中的資料庫效能，我應該考慮什麼？ **

最佳化查詢、有效使用索引、實施快取策略，並考慮資料庫擴充選項，例如針對高流量應用程式的分片或唯讀副本。

6. 如何處理生產環境中的日誌記錄？

使用 Winston 等日誌記錄庫，使用 ELK 堆疊（Elasticsearch、Logstash、Kibana）等服務或基於雲端的解決方案集中日誌，並確保您不會記錄敏感資訊。

7.如何確保我的應用程式具有可擴展性？

可擴展性對於生產應用程式至關重要。考慮使用負載平衡器、實施快取策略、最佳化資料庫查詢以及將應用程式設計為無狀態。您也可以探索大型應用程式的微服務架構。

8.保護 Node.js 應用程式安全的最佳實務是什麼？

安全至關重要。實施適當的身份驗證和授權、使用 HTTPS、保持依賴項更新、清理使用者輸入並遵循 OWASP 安全性準則。考慮使用 Helmet.js 等注重安全的中間件並實施速率限制以防止濫用。

9.我應該如何管理環境變數和配置？

使用.env檔案進行本地開發，但切勿將這些文件提交到版本控制。對於生產，請使用託管平台提供的環境變數。考慮使用組態管理工具來進行複雜的設定。

10.如何優化資料庫效能？

最佳化查詢，有效使用索引，實施快取策略（例如，Redis），並考慮資料庫擴充選項，例如針對高流量應用程式的分片或唯讀副本。定期進行資料庫維護和優化。

11.在生產環境中處理錯誤和異常的最佳方法是什麼？

在 Express 中實作全域錯誤處理中間件。全面記錄錯誤，但避免向客戶暴露敏感資訊。考慮使用像 Sentry 這樣的錯誤監控服務來進行即時錯誤追蹤和警報。

12.如何對前端和後端實施有效的測試策略？

使用 Jest 在前端和後端進行單元和整合測試。使用 Cypress 等工具實施端對端測試。以高測試覆蓋率為目標，並將測試整合到 CI/CD 管道中。

13.處理 API 版本控制最有效的方法是什麼？

考慮使用 URL 版本控制（例如/api/v1/ ）或自訂請求標頭。對舊 API 版本實施明確的棄用政策，並向 API 用戶有效傳達變更。

14.如何確保部署順利且停機時間最短？

實施藍綠部署或捲動更新。使用容器化 (Docker) 和編排工具 (Kubernetes) 來更輕鬆地擴展和部署。使用強大的 CI/CD 管道自動化您的部署流程。

15.我應該使用什麼快取策略來提高效能？

實現多個層級的快取：瀏覽器快取、靜態資源的 CDN 快取、應用程式層級快取（例如 Redis）和資料庫查詢快取。請注意快取失效策略以確保資料一致性。

16.如何安全地處理身份驗證，尤其是 SPA？

考慮使用 JWT（JSON Web 令牌）進行無狀態身份驗證。實施安全性令牌儲存（HttpOnly cookie）、使用刷新令牌並考慮使用 OAuth2 進行第三方驗證。對於 SPA，請注意 XSS 和 CSRF 保護。

17.如何優化 React 應用程式的效能？

實現程式碼分割和延遲載入。使用 React.memo 和 useMemo 進行昂貴的計算。使用 React DevTools 等工具優化渲染。考慮使用伺服器端渲染或靜態網站產生來縮短初始載入時間。

18.為我的全端應用程式選擇託管平台時應該考慮什麼？

考慮可擴展性、定價、部署簡單性、可用服務（資料庫、快取等）以及對技術堆疊的支援等因素。流行的選項包括 AWS、Google Cloud Platform、Heroku 和 DigitalOcean。

請記住，建立生產級應用程式是一個迭代過程。根據實際使用情況和回饋持續監控、測試和改進您的應用程式。

原文出處：https://dev.to/shanu001x/how-to-setup-full-stack-project-for-production-in-nodejs-environment-2d7l

0個讚 0留言 99瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

小編精選 - 技術文章翻譯

精選技術文章翻譯，幫助開發者持續吸收新知。