【实践】Vue 前端项目部署到Nginx服务器(Linux环境)

同步更新 微信公众号【爱写代码的小任】 欢迎关注

引言：

Vue.js 是一种流行的前端框架，而 Nginx 是一款高性能的 Web 服务器。将 Vue 前端项目成功部署到 Nginx 服务器上，可以为用户提供快速可靠的访问体验。本文将介绍如何在 Linux 环境下实践将 Vue 前端项目部署到 Nginx 服务器的步骤。

前提条件

在开始之前，确保你已经满足以下前提条件：

1. 你已经在本地开发环境中创建和测试了 Vue 前端项目。
2. 你已经在 Linux 服务器上安装了 Nginx，并且服务器和网络设置正确。

实践步骤

1. 构建 Vue 项目

使用 Vue CLI 或其他构建工具，在本地构建 Vue 项目的生产版本。这将生成一个包含静态文件的 dist 目录。然后将 dist目录 打包成 dist.zip 准备上传到服务器上

2. 上传静态文件到服务器

将本机打包好的zip 上传到远程服务器上. 或者已经提前规划上传的目录, 可以通过 scp 命令

$ scp dist.zip ssdmp@192.168.1.138:~

scp 命令就是远程上传下载的命令

3. 登录远程linux服务器上 并解压到指定目录

本文假设部署目录在 ~/taskmanager/0.0.1_20231124 ( ~ 当前用户下)
taskmanager 表示项目目录 0.0.1_20231124表示升级目录, 一般可以按照版本号+日期命名

# 登录Linux服务
$ ssh ssdmp@192.168.1.138
# 创建解压目录
$ mkdir ~/taskmanager
# 进入解压目录
$ cd ~/taskmanager
# 移动 程序包 到 当前目录 (~/taskmanager)
$ mv ~/dist.zip .
# 执行解压
$ unzip dist.zip 
# 重名文件夹为升级目录
$ mv dist 0.0.1_20231124

4. 配置 Nginx 配置文件

找到 Nginx 安装 和 配置目录 本文 Nginx 安装目录在 /opt/ssdmp/nginx-1.24.0/

# 核心配置文件  
$ /opt/ssdmp/nginx-1.24.0/conf/conf.d
# 创建 taskmanager.conf 可以通过 vim命令
$ vim taskmanager.conf 
# 内容放到下面了

upstream backend {
   server 127.0.0.1:8080;
}

server {
        listen       80;
        server_name  localhost;

        charset utf-8;

        access_log  logs/taskmanager.access.log;

        location / {
            root   /home/ssdmp/taskmanager/0.0.1_20231124;
            index index.html;
        }

        location /prod-api {
           proxy_pass http://backend;
           rewrite ^/prod-api/(.*)$ /$1 break;
           proxy_set_header host $host;
           proxy_set_header X-Real-IP      $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        location = /50x.html {
            root   html;
        }
}

5. 重启 Nginx

通过服务管理工具 Supervisor

直接点击 Restart 即可
之后通过浏览器访问,即可

6. 后续升级

1. 重复第3步
2. 修改nginx 项目配置文件 修改为解压后的目录
3. 重复第5步 重启即可

总结

通过遵循以上步骤，你可以将 Vue 前端项目成功部署到 Nginx 服务器上。这样，你的应用程序将变得可访问，并能够提供出色的性能和用户体验。

在实际的部署过程中，你可能需要根据你的具体需求进行额外的配置和优化，例如启用 HTTPS、配置缓存等。此外，确保定期更新和维护服务器、Nginx 和 Vue 项目，以确保安全性和性能的最佳状态。

祝你成功部署 Vue 前端项目到 Nginx 服务器上！

（注意：在进行任何部署操作之前，请确保备份你的文件和配置，并谨慎操作。本文假设你已经具备一定的 Linux 系统管理和前端开发经验。）

关注我，实时获取我的更新动态，和我一起讨论