本地服务器搭建：构建前端开发的本地环境

为什么需要本地服务器？

现代前端开发已经超越了简单的静态网页开发，我们需要本地服务器来模拟真实的网络环境，提供完整的开发体验。本地服务器不仅是开发过程中不可或缺的工具，更是前后端分离架构的基础设施。

本地服务器的核心价值

模拟真实环境：本地服务器能够模拟生产环境的 HTTP 请求、响应机制，确保代码在部署到服务器后能正常工作。

热重载功能：现代前端开发服务器支持热重载，代码修改后自动刷新页面，大大提高开发效率。

解决跨域问题：通过代理配置，可以轻松解决开发过程中的跨域请求问题，无需复杂的配置。

模块化支持：现代前端服务器支持 ES6 模块、TypeScript 等，无需手动编译即可直接使用现代 JavaScript 特性。

开发便利性：提供开发工具集成、错误提示、性能监控等开发时才需要的功能。

不同类型的本地服务器

静态文件服务器：用于托管 HTML、CSS、JavaScript 等静态文件，适合简单的网站开发和原型制作。

开发服务器：提供热重载、模块解析、代理转发等高级功能，适合现代前端框架开发。

API 服务器：提供 RESTful API、GraphQL 等后端服务，支持数据交互和业务逻辑。

全栈服务器：同时提供前端资源和后端 API 服务，适合全栈开发项目。

静态文件服务器搭建

Python SimpleHTTPServer

Python 内置的 HTTP 服务器是最简单的静态文件服务器解决方案：

bash

# Python 3.x
python -m http.server 8000

# Python 2.x
python -m SimpleHTTPServer 8000

# 指定端口和目录
python -m http.server 8080 --directory /path/to/your/project

使用示例：

html

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>本地服务器测试</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <h1>本地服务器测试页面</h1>
      <p>当前时间：<span id="current-time"></span></p>
      <button id="fetch-btn">获取API数据</button>
      <div id="result"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

javascript

// script.js
function updateTime() {
  const now = new Date();
  document.getElementById("current-time").textContent = now.toLocaleString();
}

async function fetchData() {
  try {
    const response = await fetch("/api/test.json");
    const data = await response.json();
    document.getElementById("result").textContent = JSON.stringify(data);
  } catch (error) {
    document.getElementById("result").textContent =
      "获取数据失败: " + error.message;
  }
}

// 初始化
updateTime();
setInterval(updateTime, 1000);
document.getElementById("fetch-btn").addEventListener("click", fetchData);

json

// api/test.json
{
  "message": "Hello from local server!",
  "timestamp": "2023-11-27T10:00:00Z",
  "status": "success"
}

Node.js http-server

Node.js 的 http-server 是一个功能更丰富的静态文件服务器：

bash

# 全局安装
npm install -g http-server

# 启动服务器
http-server [path] [options]

# 常用选项
http-server -p 8080 -o -c-1 -S -C cert.pem -K key.pem

配置选项：

bash

-p 或 --port      # 指定端口（默认8080）
-a 或 --address   # 指定地址（默认0.0.0.0）
-d 或 --directory # 指定目录（默认当前目录）
-o 或 --open      # 启动后自动打开浏览器
-c 或 --cache     # 设置缓存时间（默认3600秒，-1表示禁用缓存）
-s 或 --silent    # 静默模式
-S 或 --ssl       # 启用HTTPS
-C 或 --cert      # SSL证书文件
-K 或 --key       # SSL私钥文件

配置文件：http-server.json

json

{
  "port": 8080,
  "host": "localhost",
  "root": "./public",
  "open": true,
  "cache": -1,
  "ext": true,
  "cors": true,
  "gzip": true
}

Live Server（VS Code 扩展）

Live Server 是 VS Code 中最受欢迎的本地服务器扩展：

安装与配置：

在 VS Code 扩展商店搜索"Live Server"
安装 Ritwick Dey 开发的 Live Server 扩展
右键 HTML 文件选择"Open with Live Server"

自定义配置：

json

// settings.json
{
  "liveServer.settings.port": 5500,
  "liveServer.settings.root": "/",
  "liveServer.settings.NoBrowser": false,
  "liveServer.settings.host": "localhost",
  "liveServer.settings.fullReload": false,
  "liveServer.settings.wait": 1000,
  "liveServer.settings.customBrowser": "chrome",
  "liveServer.settings.ChromeDebuggingAttachment": false,
  "liveServer.settings.ignoreFiles": [".vscode/**", "**/*.scss", "**/*.sass"],
  "liveServer.settings.https": {
    "enable": false,
    "cert": "/path/to/cert.pem",
    "key": "/path/to/key.pem",
    "passphrase": ""
  }
}

高级功能：

html

<!-- 在HTML中配置Live Server选项 -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Live Server 测试</title>

    <!-- Live Server控制 -->
    <script>
      // 禁用自动重载
      window.liveServer && window.liveServer.disconnect();

      // 手动触发重载
      function forceReload() {
        window.liveServer && window.liveServer.refresh();
      }
    </script>
  </head>
  <body>
    <button onclick="forceReload()">强制刷新</button>
    <div id="app"></div>
  </body>
</html>

现代开发服务器

Webpack Dev Server

Webpack Dev Server 是最专业的开发服务器，与现代前端工具链完美集成：

基础配置：webpack.config.js

javascript

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.[hash].js",
    clean: true,
  },

  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
    },
    compress: true,
    port: 9000,
    open: true,
    hot: true,
    liveReload: true,
    historyApiFallback: true,

    // 代理配置
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },

      // 多个代理
      "/auth": {
        target: "http://localhost:4000",
        changeOrigin: true,
        secure: false,
      },
    },

    // HTTPS配置
    https: {
      key: fs.readFileSync("./server.key"),
      cert: fs.readFileSync("./server.crt"),
    },

    // 自定义中间件
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
        throw new Error("webpack-dev-server is not defined");
      }

      // 自定义API端点
      devServer.app.get("/api/test", (req, res) => {
        res.json({ message: "Hello from webpack dev server!" });
      });

      return middlewares;
    },
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

启动命令：

json

// package.json
{
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production",
    "serve": "webpack serve --open --mode development",
    "dev": "webpack serve --compress --port 3000 --open"
  }
}

热模块替换（HMR）配置：

javascript

// src/index.js
import "./styles.css";
import { createApp } from "./app";

const app = createApp();

// 启用HMR
if (module.hot) {
  module.hot.accept("./app.js", () => {
    const nextApp = require("./app.js").createApp();
    app.destroy();
    nextApp.mount();
  });

  module.hot.accept("./styles.css");
}

app.mount();

// 销毁方法
app.destroy = function () {
  console.log("应用实例已销毁");
};

Vite Dev Server

Vite 是下一代前端构建工具，提供极快的开发体验：

基础配置：vite.config.js

javascript

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

export default defineConfig({
  plugins: [react()],

  // 开发服务器配置
  server: {
    host: "localhost",
    port: 3000,
    open: true,
    cors: true,

    // 代理配置
    proxy: {
      "/api": {
        target: "http://backend-server:3001",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },

      // WebSocket代理
      "/socket.io": {
        target: "ws://localhost:4000",
        ws: true,
      },
    },
  },

  // 预览服务器配置（生产环境预览）
  preview: {
    port: 4173,
    host: "localhost",
    https: true,
  },

  // 构建优化
  build: {
    outDir: "dist",
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["react", "react-dom"],
          utils: ["lodash", "axios"],
        },
      },
    },
  },

  // 路径别名
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
      "@components": resolve(__dirname, "src/components"),
      "@utils": resolve(__dirname, "src/utils"),
    },
  },

  // CSS配置
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`,
      },
    },
  },
});

项目初始化：

bash

# 创建Vite项目
npm create vite@latest my-vite-app -- --template react
cd my-vite-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

插件配置示例：

javascript

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { VitePWA } from "vite-plugin-pwa";
import { crxHmr } from "@crxjs/vite-plugin";
import svgr from "vite-plugin-svgr";

export default defineConfig({
  plugins: [
    react(),

    // SVG组件支持
    svgr({
      svgrOptions: {
        icon: true,
        svgo: false,
      },
    }),

    // PWA支持
    VitePWA({
      registerType: "autoUpdate",
      workbox: {
        globPatterns: ["**/*.{js,css,html,ico,png,svg}"],
      },
    }),
  ],

  // 环境变量配置
  define: {
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
  },
});

框架特定开发服务器

Create React App

React 官方脚手架集成的开发服务器：

javascript

// 自定义启动配置：.env.development
REACT_APP_API_URL=http://localhost:4000
REACT_APP_ENV=development
GENERATE_SOURCEMAP=true

// .env.production
REACT_APP_API_URL=https://api.production.com
REACT_APP_ENV=production
GENERATE_SOURCEMAP=false

自定义 Webpack 配置：config-overrides.js

javascript

const {
  override,
  addWebpackResolve,
  addBabelPlugin,
} = require("customize-cra");

module.exports = override(
  // 添加路径别名
  addWebpackResolve({
    extensions: [".ts", ".tsx", ".js", ".jsx"],
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  }),

  // 添加Babel插件
  addBabelPlugin([
    "import",
    {
      libraryName: "antd",
      libraryDirectory: "es",
      style: "css",
    },
  ])
);

Vue CLI 开发服务器

Vue CLI 提供了丰富的开发服务器配置：

javascript

// vue.config.js
const path = require("path");

module.exports = {
  devServer: {
    port: 8080,
    host: "localhost",
    open: true,
    https: false,

    // 代理配置
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },

    // 启动前配置
    before: function (app) {
      app.get("/api/mock", (req, res) => {
        res.json({
          message: "Mock data from Vue dev server",
          timestamp: Date.now(),
        });
      });
    },
  },

  // 路径别名
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
        "@components": path.resolve(__dirname, "src/components"),
      },
    },
  },
};

Angular 开发服务器

Angular CLI 的开发服务器支持强大的配置选项：

javascript

// angular.json
{
  "projects": {
    "my-app": {
      "architect": {
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "ssl": false,
            "sslKey": "./server.key",
            "sslCert": "./server.crt",
            "port": 4200,
            "host": "localhost",
            "proxyConfig": "proxy.conf.json"
          }
        }
      }
    }
  }
}

代理配置：proxy.conf.json

json

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  },
  "/api/auth/*": {
    "target": "http://auth-server:4000",
    "secure": false,
    "changeOrigin": true
  }
}

Docker 化开发服务器

基础 Docker 配置

Dockerfile：

dockerfile

FROM node:16-alpine

# 设置工作目录
WORKDIR /app

# 复制package文件
COPY package*.json ./

# 安装依赖
RUN npm ci --only=production

# 复制源代码
COPY . .

# 暴露端口
EXPOSE 3000

# 启动命令
CMD ["npm", "start"]

docker-compose.yml：

yaml

version: "3.8"

services:
  frontend:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development
      - API_URL=http://backend:8000
    command: npm run dev

  backend:
    image: node:16-alpine
    working_dir: /app
    volumes:
      - ./backend:/app
    ports:
      - "8000:8000"
    command: npm run dev
    environment:
      - NODE_ENV=development
      - DATABASE_URL=postgresql://user:password@db:5432/mydb

  db:
    image: postgres:13
    environment:
      - POSTGRES_DB=mydb
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=password
    volumes:
      - postgres_data:/var/lib/postgresql/data

volumes:
  postgres_data:

开发环境优化

多阶段构建 Dockerfile：

dockerfile

# 开发阶段
FROM node:16-alpine as development

WORKDIR /app
COPY package*.json ./
RUN npm install

COPY . .
EXPOSE 3000
CMD ["npm", "run", "dev"]

# 生产阶段
FROM node:16-alpine as production

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production && npm cache clean --force

COPY --from=development /app/dist ./dist
COPY --from=development /app/public ./public

EXPOSE 80
CMD ["node", "dist/server.js"]

HTTPS 本地服务器

自签名证书生成

使用 OpenSSL 生成证书：

bash

# 生成私钥
openssl genrsa -out server.key 2048

# 生成证书签名请求
openssl req -new -key server.key -out server.csr

# 生成自签名证书
openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

# 一次性生成证书
openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes

Node.js HTTPS 服务器

基础 HTTPS 服务器：

javascript

// https-server.js
const https = require("https");
const fs = require("fs");
const path = require("path");

const options = {
  key: fs.readFileSync(path.join(__dirname, "server.key")),
  cert: fs.readFileSync(path.join(__dirname, "server.crt")),
};

const server = https.createServer(options, (req, res) => {
  // 设置CORS头
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");

  // 路由处理
  if (req.url === "/" || req.url === "/index.html") {
    fs.readFile(path.join(__dirname, "public", "index.html"), (err, data) => {
      if (err) {
        res.writeHead(500);
        return res.end("Server Error");
      }
      res.writeHead(200, { "Content-Type": "text/html" });
      res.end(data);
    });
  } else if (req.url.endsWith(".js")) {
    fs.readFile(path.join(__dirname, "public", req.url), (err, data) => {
      if (err) {
        res.writeHead(404);
        return res.end("File Not Found");
      }
      res.writeHead(200, { "Content-Type": "application/javascript" });
      res.end(data);
    });
  } else {
    res.writeHead(404);
    res.end("Not Found");
  }
});

const PORT = 4430;
server.listen(PORT, () => {
  console.log(`HTTPS server running on port ${PORT}`);
});

Express HTTPS 配置

javascript

// express-https.js
const express = require("express");
const https = require("https");
const fs = require("fs");
const path = require("path");
const cors = require("cors");
const morgan = require("morgan");

const app = express();

// 中间件配置
app.use(cors());
app.use(morgan("combined"));
app.use(express.json());
app.use(express.static("public"));

// API路由
app.get("/api/data", (req, res) => {
  res.json({
    message: "Hello from HTTPS server",
    timestamp: new Date().toISOString(),
    secure: true,
  });
});

// 代理中间件
app.use(
  "/api",
  createProxyMiddleware({
    target: "http://localhost:3001",
    changeOrigin: true,
    pathRewrite: {
      "^/api": "",
    },
  })
);

const options = {
  key: fs.readFileSync(path.join(__dirname, "server.key")),
  cert: fs.readFileSync(path.join(__dirname, "server.crt")),
};

const server = https.createServer(options, app);

const PORT = process.env.HTTPS_PORT || 4430;
server.listen(PORT, () => {
  console.log(`Express HTTPS server running on port ${PORT}`);
});

本地证书信任设置

Windows 系统：

bash

# 将证书导入到受信任的根证书颁发机构
# 1. 双击cert.crt文件
# 2. 选择"安装证书"
# 3. 选择"当前用户"或"本地计算机"
# 4. 选择"受信任的根证书颁发机构"
# 5. 完成导入

macOS 系统：

bash

# 添加证书到钥匙串
sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain server.crt

# 或者使用钥匙串访问应用手动添加

高级配置与优化

多环境配置

环境变量管理：

javascript

// server.js
const express = require("express");
const path = require("path");

const config = {
  development: {
    port: 3000,
    apiBaseUrl: "http://localhost:4000",
    enableCors: true,
    enableLogging: true,
  },
  staging: {
    port: 3001,
    apiBaseUrl: "https://api-staging.example.com",
    enableCors: true,
    enableLogging: true,
  },
  production: {
    port: 80,
    apiBaseUrl: "https://api.example.com",
    enableCors: false,
    enableLogging: false,
  },
};

const env = process.env.NODE_ENV || "development";
const appConfig = config[env];

const app = express();

// 根据环境配置中间件
if (appConfig.enableCors) {
  app.use(cors());
}

if (appConfig.enableLogging) {
  app.use(morgan("combined"));
}

// 暴露配置给前端
app.get("/config", (req, res) => {
  res.json({
    apiBaseUrl: appConfig.apiBaseUrl,
    environment: env,
  });
});

app.listen(appConfig.port, () => {
  console.log(`Server running in ${env} mode on port ${appConfig.port}`);
});

环境变量文件：

bash

# .env.development
NODE_ENV=development
PORT=3000
API_URL=http://localhost:4000
LOG_LEVEL=debug

# .env.production
NODE_ENV=production
PORT=80
API_URL=https://api.example.com
LOG_LEVEL=error

# .env.staging
NODE_ENV=staging
PORT=3001
API_URL=https://api-staging.example.com
LOG_LEVEL=info

性能优化

Gzip 压缩配置：

javascript

const compression = require("compression");

app.use(
  compression({
    filter: (req, res) => {
      if (req.headers["x-no-compression"]) {
        return false;
      }
      return compression.filter(req, res);
    },
    level: 6,
    threshold: 1024,
  })
);

静态资源缓存：

javascript

const express = require("express");
const app = express();

// 静态资源配置
app.use(
  express.static("public", {
    maxAge: "1y", // 缓存1年
    etag: true,
    lastModified: true,
    setHeaders: (res, path) => {
      if (path.endsWith(".html")) {
        res.setHeader("Cache-Control", "no-cache");
      }
    },
  })
);

内存使用优化：

javascript

// 启用gzip压缩
app.use(compression());

// 限制请求体大小
app.use(express.json({ limit: "10mb" }));
app.use(express.urlencoded({ extended: true, limit: "10mb" }));

// 连接池配置
const pool = mysql.createPool({
  connectionLimit: 10,
  host: "localhost",
  user: "root",
  password: "password",
  database: "mydb",
});

监控与日志

健康检查端点：

javascript

app.get("/health", (req, res) => {
  const health = {
    status: "ok",
    timestamp: new Date().toISOString(),
    uptime: process.uptime(),
    memory: process.memoryUsage(),
    version: process.version,
  };

  res.json(health);
});

app.get("/metrics", (req, res) => {
  const metrics = {
    memory: process.memoryUsage(),
    cpu: process.cpuUsage(),
    uptime: process.uptime(),
    activeConnections: server.connections,
  };

  res.json(metrics);
});

日志系统配置：

javascript

const winston = require("winston");

const logger = winston.createLogger({
  level: "info",
  format: winston.format.combine(
    winston.format.timestamp(),
    winston.format.errors({ stack: true }),
    winston.format.json()
  ),
  defaultMeta: { service: "frontend-server" },
  transports: [
    new winston.transports.File({ filename: "error.log", level: "error" }),
    new winston.transports.File({ filename: "combined.log" }),
  ],
});

if (process.env.NODE_ENV !== "production") {
  logger.add(
    new winston.transports.Console({
      format: winston.format.simple(),
    })
  );
}

常见问题与解决方案

端口占用问题

bash

# 查找占用端口的进程
# Windows
netstat -ano | findstr :3000
# macOS/Linux
lsof -i :3000

# 强制终止进程
# Windows
taskkill /PID <PID> /F
# macOS/Linux
kill -9 <PID>

CORS 错误解决

javascript

// 完整的CORS配置
app.use(
  cors({
    origin: function (origin, callback) {
      const allowedOrigins = ["http://localhost:3000", "http://127.0.0.1:3000"];
      if (!origin || allowedOrigins.indexOf(origin) !== -1) {
        callback(null, true);
      } else {
        callback(new Error("Not allowed by CORS"));
      }
    },
    credentials: true,
    methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
    allowedHeaders: ["Content-Type", "Authorization"],
  })
);

热重载不工作

javascript

// 文件监听配置
module.exports = {
  devServer: {
    watchFiles: ["src/**/*", "public/**/*"],
    watchOptions: {
      ignored: /node_modules/,
      aggregateTimeout: 300,
      poll: 1000,
    },
  },
};

总结

本地服务器是前端开发的基础设施，掌握不同类型的服务器配置和优化技巧，能够显著提升开发效率和应用质量。

本节要点回顾：

本地服务器模拟真实的网络环境，提供热重载、代理等功能
静态文件服务器适合简单的网站开发
现代开发服务器支持模块解析、热模块替换等高级功能
框架特定的开发服务器提供优化的开发体验
Docker 化开发服务器确保环境一致性和可移植性
HTTPS 配置让开发环境更接近生产环境
多环境配置支持开发、测试、生产的不同需求
性能优化和监控确保服务器的稳定性和效率

选择合适的本地服务器方案应该基于项目需求、团队规模和技术栈。简单的项目可能只需要基础的静态文件服务器，而复杂的企业级应用则需要功能完整的开发服务器。

本地服务器搭建：构建前端开发的本地环境 ​

为什么需要本地服务器？ ​

本地服务器的核心价值 ​

不同类型的本地服务器 ​

静态文件服务器搭建 ​

Python SimpleHTTPServer ​

Node.js http-server ​

Live Server（VS Code 扩展） ​

现代开发服务器 ​

Webpack Dev Server ​

Vite Dev Server ​

框架特定开发服务器 ​

Create React App ​

Vue CLI 开发服务器 ​

Angular 开发服务器 ​

Docker 化开发服务器 ​

基础 Docker 配置 ​

开发环境优化 ​

HTTPS 本地服务器 ​

自签名证书生成 ​

Node.js HTTPS 服务器 ​

Express HTTPS 配置 ​

本地证书信任设置 ​

高级配置与优化 ​

多环境配置 ​

性能优化 ​

监控与日志 ​

常见问题与解决方案 ​

端口占用问题 ​

CORS 错误解决 ​

热重载不工作 ​

总结 ​

本地服务器搭建：构建前端开发的本地环境

为什么需要本地服务器？

本地服务器的核心价值

不同类型的本地服务器

静态文件服务器搭建

Python SimpleHTTPServer

Node.js http-server

Live Server（VS Code 扩展）

现代开发服务器

Webpack Dev Server

Vite Dev Server

框架特定开发服务器

Create React App

Vue CLI 开发服务器

Angular 开发服务器

Docker 化开发服务器

基础 Docker 配置

开发环境优化

HTTPS 本地服务器

自签名证书生成

Node.js HTTPS 服务器

Express HTTPS 配置

本地证书信任设置

高级配置与优化

多环境配置

性能优化

监控与日志

常见问题与解决方案

端口占用问题

CORS 错误解决

热重载不工作

总结