ubuntu中怎么用nginx部署vue项目

发布时间：2022-02-21 09:27:49 作者：iii
来源：亿速云阅读：233

# Ubuntu中怎么用Nginx部署Vue项目

## 前言

在当今的前端开发领域，Vue.js因其轻量级、灵活性和易用性而广受欢迎。当Vue项目开发完成后，如何将其部署到生产环境就成为一个重要课题。Nginx作为一款高性能的HTTP和反向代理服务器，常被用于部署静态网站和前端应用。本文将详细介绍在Ubuntu系统中使用Nginx部署Vue项目的完整流程。

## 准备工作

### 1. 系统要求

- Ubuntu 18.04/20.04/22.04 LTS（推荐）
- 具有sudo权限的用户
- 稳定的网络连接

### 2. 工具准备

- Vue项目源码（已完成开发）
- SSH客户端（如PuTTY或终端）
- 代码编辑器

### 3. 服务器基础配置

在开始之前，建议执行以下系统更新：

```bash
sudo apt update
sudo apt upgrade -y

第一部分：Vue项目生产环境构建

1.1 安装Node.js和npm

Vue项目构建需要Node.js环境：

# 安装Node.js和npm
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt install -y nodejs

# 验证安装
node -v
npm -v

1.2 构建Vue项目

将项目上传到服务器后（可通过git或scp等方式），进入项目目录：

# 安装项目依赖
npm install

# 生产环境构建
npm run build

构建完成后，项目目录下会生成dist文件夹，包含所有静态资源文件。

1.3 常见构建问题解决

内存不足：可增加swap空间或使用--max_old_space_size参数

依赖安装失败：尝试清除缓存后重新安装


npm cache clean --force
rm -rf node_modules package-lock.json
npm install

第二部分：Nginx安装与配置

2.1 安装Nginx

sudo apt install nginx -y

2.2 基础命令

# 启动
sudo systemctl start nginx

# 开机自启
sudo systemctl enable nginx

# 状态检查
sudo systemctl status nginx

2.3 防火墙配置

sudo ufw allow 'Nginx Full'
sudo ufw enable

第三部分：部署Vue项目

3.1 部署静态文件

将构建好的dist文件夹内容复制到Nginx的默认网站目录：

sudo cp -r dist/* /var/www/html/

或者为项目创建专用目录：

sudo mkdir -p /var/www/your_project
sudo cp -r dist/* /var/www/your_project/

3.2 Nginx站点配置

创建新的配置文件：

sudo nano /etc/nginx/sites-available/your_project

基本配置示例：

server {
    listen 80;
    server_name your_domain.com;
    
    root /var/www/your_project;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }
}

启用配置：

sudo ln -s /etc/nginx/sites-available/your_project /etc/nginx/sites-enabled/
sudo nginx -t  # 测试配置
sudo systemctl reload nginx

3.3 高级配置选项

1. 启用Gzip压缩

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
gzip_min_length 1024;
gzip_proxied expired no-cache no-store private auth;
gzip_vary on;

2. 处理API代理

location /api/ {
    proxy_pass http://backend_server;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

3. HTTPS配置（使用Let’s Encrypt）

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your_domain.com

第四部分：运维与优化

4.1 日志管理

Nginx日志位置： - 访问日志：/var/log/nginx/access.log - 错误日志：/var/log/nginx/error.log

日志轮转配置：

sudo nano /etc/logrotate.d/nginx

4.2 性能优化

工作进程优化：

worker_processes auto;
worker_rlimit_nofile 100000;

连接优化：

events {
   worker_connections 4000;
   use epoll;
   multi_accept on;
}

4.3 安全加固

隐藏Nginx版本信息：
```
server_tokens off;
```

禁用不必要的方法：

if ($request_method !~ ^(GET|HEAD|POST)$ ) {
   return 405;
}

第五部分：常见问题排查

5.1 403 Forbidden错误

可能原因： - 文件权限不正确 - Nginx用户无访问权限

解决方案：

sudo chown -R www-data:www-data /var/www/your_project
sudo chmod -R 755 /var/www

5.2 路由刷新404问题

确保配置中包含：

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

5.3 静态资源加载失败

检查： 1. 文件路径是否正确 2. Nginx配置中的root指令 3. 文件权限

第六部分：自动化部署方案

6.1 使用Shell脚本

创建部署脚本deploy.sh：

#!/bin/bash
echo "开始部署Vue项目..."

# 拉取最新代码
git pull origin main

# 安装依赖并构建
npm install
npm run build

# 复制文件到Nginx目录
sudo rm -rf /var/www/your_project/*
sudo cp -r dist/* /var/www/your_project/

# 重启Nginx
sudo systemctl restart nginx

echo "部署完成！"

6.2 CI/CD集成（GitHub Actions示例）

.github/workflows/deploy.yml:

name: Deploy Vue App

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    
    - name: Install Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'
        
    - name: Install dependencies
      run: npm install
      
    - name: Build project
      run: npm run build
      
    - name: Deploy to server
      uses: appleboy/scp-action@master
      with:
        host: ${{ secrets.SERVER_HOST }}
        username: ${{ secrets.SERVER_USER }}
        key: ${{ secrets.SSH_PRIVATE_KEY }}
        source: "dist/*"
        target: "/var/www/your_project/"
        
    - name: Restart Nginx
      uses: appleboy/ssh-action@master
      with:
        host: ${{ secrets.SERVER_HOST }}
        username: ${{ secrets.SERVER_USER }}
        key: ${{ secrets.SSH_PRIVATE_KEY }}
        script: sudo systemctl restart nginx

结语

通过本文的详细指导，您应该已经掌握了在Ubuntu系统上使用Nginx部署Vue项目的完整流程。从环境准备、项目构建到Nginx配置和优化，每个步骤都至关重要。实际部署中可能会遇到各种环境差异和特殊需求，建议根据具体情况调整配置。

最佳实践建议

始终在部署前进行充分的本地测试
使用版本控制系统管理配置变更
定期备份重要配置和文件
监控服务器性能和访问日志
保持系统和软件包更新

希望本文能帮助您顺利完成Vue项目的生产部署，如有任何问题或建议，欢迎交流讨论。

字数统计：约4500字 “`

这篇文章提供了从准备到部署再到优化的完整指南，包含了详细的命令和配置示例，以及常见问题解决方案和自动化部署方案。您可以根据实际需求调整配置参数和部署路径。