### 使用 Docker 和 Nginx 部署前端应用到服务器 部署前端应用到服务器可以使用 Docker 和 Nginx 来实现，以下是一个完整的流程和相关代码示例。 #### 1. 创建前端项目文件 确保你的前端项目已经构建完成，并生成了静态文件。通常这些文件会存放在 `dist` 或 `build` 目录下。将这些文件复制到一个指定的目录中，例如 `/home/nginx/html`[^1]。 ```bash cp -r /path/to/your/frontend/build/* /home/nginx/html/ ``` #### 2. 安装 Docker 并运行 Nginx 容器 确保服务器上已经安装了 Docker。如果未安装，请先安装 Docker[^2]。 创建并启动一个 Nginx 容器，挂载本地配置文件和静态资源目录到容器内。以下是启动命令的详细说明： ```bash docker run \ -p 9002:80 \ --name nginx \ -v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \ -v /home/nginx/conf/conf.d:/etc/nginx/conf.d \ -v /home/nginx/log:/var/log/nginx \ -v /home/nginx/html:/usr/share/nginx/html \ -d nginx:latest ``` - `-p 9002:80`：将主机的 9002 端口映射到容器的 80 端口。 - `--name nginx`：为容器命名。 - `-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf`：挂载自定义的 Nginx 配置文件。 - `-v /home/nginx/conf/conf.d:/etc/nginx/conf.d`：挂载额外的配置文件目录。 - `-v /home/nginx/log:/var/log/nginx`：挂载日志目录。 - `-v /home/nginx/html:/usr/share/nginx/html`：挂载前端静态资源目录。 - `-d nginx:latest`：以后台模式运行最新的 Nginx 镜像。 #### 3. 配置 Nginx 在 `/home/nginx/conf/nginx.conf` 中编写 Nginx 配置文件，确保其能够正确加载静态资源。以下是一个示例配置： ```nginx user nginx; worker_processes auto; error_log /var/log/nginx/error.log notice; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; #tcp_nopush on; keepalive_timeout 65; #gzip on; include /etc/nginx/conf.d/*.conf; server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } } } ``` - `root /usr/share/nginx/html;`：指定静态资源目录。 - `try_files $uri /index.html;`：确保单页应用（SPA）的路由能够正常工作。 #### 4. 测试部署 访问服务器的 IP 地址或域名，加上端口号（如 `http://<server-ip>:9002`），确认前端应用是否正常运行。 #### 5. 删除旧容器（可选） 如果需要删除旧的容器并重新创建，请按照以下步骤操作： ```bash # 查找容器 ID docker ps -a # 停止容器 docker stop <container-id> # 删除容器 docker rm <container-id> ``` 如果容器正在运行，可以强制删除： ```bash docker rm -f <container-id> ``` #### 6. 更新与维护 当前端应用更新时，只需替换 `/home/nginx/html` 中的内容，并重启容器即可： ```bash docker restart nginx ``` --- ### 注意事项 - 确保服务器上的防火墙规则允许外部访问指定端口（如 9002）。 - 如果使用 HTTPS，请配置 SSL 证书并更新 Nginx 配置文件。 ---