vue前端项目部署

组里的前端成员不会部署前端，前端开发主要是vue，他主要是vue2，于是这个任务交到我身上了，vue项目开发完成后直接npm run build,就可以得到一个dis目录，里面主要是打包的js和静态资源，我们只要用一个静态文件服务器托管就可以了，你可以用server或者nginx,或者python自带的http-server,都是可以的

接下来我会讲解如何用nginx部署vue项目，然后通过bash脚本把这个过程简化，实现自动化部部署，上传代码运行

sh
bash run.sh

即可把项目部署到生产环境

我们用到的工具有以下

nginx
docker

初级部署

我们先来讲解不使用容器化的部署流程，即怎么把vue项目部署到nginx

上传文件

通过npm run build我们得到了一个dist目录,如果是在本地开发可以把对应目录压缩

sh
scp ./dist.rar name@ip:/path/

上传到服务器解压缩，当然你也可以用别的更方便的有UI的软件，把文件上传到服务器

安装nginx

然后需要准备nginx

sh
sudo apt update
sudo apt install nginx

ps -ef | grep nginx查看进程的是否启动

配置文件编写

接下来就是配置nginx了，编辑/etc/nginx/conf.d/default.conf(没有就创建)


nano /etc/nginx/conf.d/default.conf

内容如下

sh
# nginx.conf

server {
     listen        80; # 监听80端口，即标准HTTP端口
     server_name   localhost; # 服务器名称设置为localhost

     location / {
         root    /usr/share/nginx/html; # 配置静态文件根目录
         index   index.html index.htm; # 指定默认索引文件
         try_files $uri $uri/ /index.html; # 尝试按顺序提供请求的文件或目录，如果找不到则回退到/index.html
     }

     error_page    500 502 503 504   /50x.html; # 自定义错误页面
     location = /50x.html {
         root    /usr/share/nginx/html; # 错误页面的根目录
     }
}

相信就算不了解nginx的人看了上面的配置文件也知道接下来的做法了，就是把/dist目录直接扔到/usr/share/nginx/html就好了，


cp -r ./dist `/usr/share/nginx/html

启动服务

接着启动nginx


nginx -g daemon off

上面的命令运行nginx允许我们直接用命令更新配置并且在当前终端运行而不是以守护进程运行，他会把日志输出到终端，当然，如果是开发测试的话可以，但是要上线还是后台即可，这时候可以


sudo service start nginx

但通常它会自动运行

以下是一些常用的Nginx命令

Nginx常用命令

1. 启动 Nginx

bash
sudo systemctl start nginx

或者

bash
sudo service nginx start

这两个命令都会启动 Nginx 服务。

2. 停止 Nginx

bash
sudo systemctl stop nginx

或者

bash
sudo service nginx stop

停止正在运行的 Nginx 服务。

3. 重启 Nginx

bash
sudo systemctl restart nginx

或者

bash
sudo service nginx restart

重启 Nginx 服务，通常在配置文件更改后需要执行此操作。

4. 重新加载配置

bash
sudo systemctl reload nginx

或者

bash
sudo nginx -s reload

重新加载 Nginx 配置文件，无需停止服务。这在修改配置文件后非常有用。

5. 检查配置文件语法正确性

bash
sudo nginx -t

测试 Nginx 配置文件的语法是否正确，不会启动或重启服务。

6. 查看 Nginx 版本

bash
nginx -v

显示 Nginx 的版本信息。

7. 查看 Nginx 进程状态

bash
sudo systemctl status nginx

或者

bash
ps aux | grep nginx

查看 Nginx 服务的状态或进程信息。

8. 查看 Nginx 日志

bash
sudo tail -f /var/log/nginx/error.log

实时查看 Nginx 错误日志。

bash
sudo tail -f /var/log/nginx/access.log

实时查看 Nginx 访问日志。

小节

通过上面的步骤，我们的项目已经可以通过80端口访问了，我们把上面的步骤写成一个脚本

sh
# run.sh

#!/bin/bash

# 定义目标目录
TARGET_DIR="/usr/share/nginx/html"

# 删除旧的dist目录
echo "Removing old dist directory..."
rm -rf "$TARGET_DIR/dist" 2>/dev/null
if [ $? -ne 0 ]; then
    echo "Failed to remove old dist directory."
    exit 1
fi

# 复制新的dist目录到目标目录
echo "Copying new dist directory..."
cp -r ./dist "$TARGET_DIR" 2>/dev/null
if [ $? -ne 0 ]; then
    echo "Failed to copy new dist directory."
    exit 1
fi

# 检查 Nginx 是否正在运行
if ! pgrep -f nginx > /dev/null; then
    echo "Nginx is not running. Starting Nginx..."
    # 启动 Nginx
    sudo systemctl start nginx
    if [ $? -ne 0 ]; then
        echo "Failed to start Nginx."
        exit 1
    fi
else
    echo "Nginx is already running."
fi

echo "Deployment completed successfully."

容器化部署

接下来每次更新代码，只要运行这个脚本就可以了

是不是很方便？

接下来进阶，用docker我们可以更方便的管理我们服务器资源，隔离各种运行环境

创建Dockerfile

我们需要一个Dockerfile,在当前目录下创建一个


touch Dockerfile

接下来

就是编写Dockerfile

#

# 使用官方 Nginx 镜像作为基础镜像(自备)
FROM nginx:alpine 

# 将 dist 目录复制到 Nginx 的默认 HTML 目录
COPY ./dist /usr/share/nginx/html

# 将自定义的 nginx.conf 复制到 Nginx 配置目录
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

# 暴露 80 端口
EXPOSE 80

# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

我们把dist目录和nginx.conf挂载到容器内，方便后续更新

修改运行脚本

最后修改刚刚的sh文件，将重新部署项目换成，重新构建docker镜像在运行服务

sh
#!/bin/bash

# 定义变量
CONTAINER_NAME="vue-app-container"
IMAGE_NAME="vue-app-image"
BUILD_CONTEXT=$(pwd)

# 停止并删除现有的容器（如果存在）
echo "Stopping and removing existing container..."
docker stop "$CONTAINER_NAME" 2>/dev/null || true
docker rm "$CONTAINER_NAME" 2>/dev/null || true

# 构建 Docker 镜像
echo "Building Docker image..."
docker build -t "$IMAGE_NAME" .

# 运行 Docker 容器
echo "Running Docker container..."
docker run -it -d \
   --name "$CONTAINER_NAME" \
   -p 8080:80 \
   -v "$BUILD_CONTEXT"/dist:/usr/share/nginx/html \
   -v "$BUILD_CONTEXT"/nginx.conf:/etc/nginx/conf.d/default.conf \
   --restart=always\
   "$IMAGE_NAME"

# 输出容器日志
echo "Following container logs..."
docker logs -f "$CONTAINER_NAME"

这样每次上传代码就只需要运行这个run.sh文件就好!

为了简化重复操作，建议你在开发机也建立一个script目录，在里面放上常用的脚本，比如up.sh，上传最新代码到服务器

模板大概如下

sh
#!/bin/bash

# 定义变量
BUILD_DIR="dist"
REMOTE_HOST="username@ip"
REMOTE_PATH="/path/to/remote/directory"

# 切换到上一级目录并删除dist目录
echo "Removing old build directory..."
cd .. && rm -r "$BUILD_DIR" 2>/dev/null || { echo "Error removing directory $BUILD_DIR"; exit 1; }

# 构建项目
echo "Building project..."
npm run build

# 检查构建是否成功
if [ ! -d "$BUILD_DIR" ]; then
    echo "Build failed, $BUILD_DIR does not exist."
    exit 1
fi

# 使用scp上传构建好的dist目录
echo "Copying build to remote host..."
scp -r "$BUILD_DIR" "$REMOTE_HOST":"$REMOTE_PATH"

# 输出完成信息
echo "Build and copy process completed successfully."

完成！