当前位置：首页 > news >正文

Linux下使用docker nginx部署vue前端项目工程

news 2025/6/26 16:59:18

1、使用Docker和Nginx部署Vue项目的步骤

1、准备好VUE项目，已打包编译

2、docker环境已完成安装

3、本地环境上创建nginx目录，下包括conf，html，logs目录。用于容器映射（其实是方便修改文件，因为在容器中不方便修改，在修改后restart容器即可加载）

4、拉取nginx镜像

5、创建容器并映射至之前的目录

6、启动容器

7、验证

2、详细步骤

2.1、准备Vue项目

确保Vue项目已构建完成，生成静态文件。在项目根目录运行以下命令：

npm run build

2.2、docker环境已安装

docker info

2.3、创建本地映射目录

在本地环境中自定义一个目录：示例是在/home/d_app/nginx

# 容器映射目录
mkdir -p /usr/share/nginx/conf
mkdir -p /usr/share/nginx/html
mkdir -p /usr/share/nginx/logs

在conf目录下创建配置文件：

# conf配置文件
touch /usr/share/nginx/conf/nginx.conf

在nginx.conf文件添加如下配置

# 配置文件内容worker_processes  1;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;server {listen     8080;server_name  localhost;location / {root /usr/share/nginx/html;index index.html index.htm;}# 代理转发请求至网关，prod-api标识解决跨域问题# location /prod-api/ {#    proxy_pass http://0.0.0.0:9999/;# }}
}

2.4、拉取镜像

# 拉取镜像
docker pull nginx# 查看镜像
docker images

2.5、创建容器并启动

docker run -it -d \
--name nginx \
-p 8080:8080 \
-v /usr/share/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /usr/share/nginx/html:/usr/share/nginx/html \
-v /usr/share/nginx/logs:/usr/share/nginx/logs \
--restart=always \
nginx

重新启动新的容器
下面代码-v前面被处理过，可直接复制使用，\ 表示换下一行继续
-d: 后台启动
-p: 宿主机的80端口映射容器的80端口
-v: 挂载宿主机文件或目录到容器，分别表示配置文件和nginx工作空间目录的映射，冒号左边是宿主机，右边是容器的，这样修改宿主机的配置文件和工作空间就可以同步到容器
–restart=always: 伴随docker重启自动重启该容器

2.6、创建容器并启动

# 查看容器docker ps -a# 查看nginx启动日志docker logs nginx

2.7、启动、关闭、重启nginx

# 启动
docker start nginx# 停止
docker stop nginx# 重启
docker restart nginx

2.8、验证部署

访问http://localhost:8080，确认前端应用正常运行。

3、注意事项

确保dist目录已生成且包含index.html。
若需支持SPA路由，必须配置Nginx的try_files规则。
拉取镜像时，有可能会报错：Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waiting for connection

查看全文

http://www.lqws.cn/news/524089.html