前端vue项目服务器部署(docker)

2024-09-08 07:28

本文主要是介绍前端vue项目服务器部署(docker),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前端vue项目服务器部署(docker)

步骤 1: 导入 Nginx Docker 镜像

1、上传 Nginx Docker 镜像

将你的nginx-alpine.tar包上传到服务器上。假设路径为 /var/v3-admin-vite/nginx-alpine.tar

scp -r "C:\Users\86184\Desktop\v3-admin-vite" root@110.40.179.182:/var/
2、导入 Nginx Docker 镜像

使用以下命令将 .tar 文件加载为 Docker 镜像:

docker load -i /var/v3-admin-vite/nginx-alpine.tar

执行后会显示类似如下的输出,表示镜像已成功加载:

Loaded image: nginx:alpine
3、验证镜像是否加载

确认镜像已经导入成功:

docker images

应该可以看到 nginx:alpine 镜像在列表中。

步骤 2: 设置 Docker 项目

1、确保目录结构正确

在你的服务器上确保 /var/v3-admin-vite/ 目录下包含以下内容:

- dist/:Vue 项目构建后的静态文件。

- nginx.conf:自定义的 Nginx 配置文件。

- Dockerfile

确保 dist 目录中有你的 Vue 项目的打包内容。

2、编写 Dockerfile

/var/v3-admin-vite/ 下编写或确保已经有如下内容的 Dockerfile

# 使用导入的 nginx:alpine 镜像
FROM nginx:alpine# 将自定义的 Nginx 配置文件复制到容器中
COPY ./nginx.conf /etc/nginx/nginx.conf# 将 Vue 项目的构建文件复制到 Nginx 的静态资源目录中
COPY ./dist /usr/share/nginx/html# 暴露 Nginx 的端口
EXPOSE 80# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]
3、编写nginx.conf

由于我的Vue 项目构建后的静态文件/var/v3-admin-vite/dist的结构是:

-static

-app-loading

-cssfavicon.ico

-index.html

因此编写的nginx内容如下:

worker_processes  1;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;server {listen       80;server_name  110.40.179.182;  # 部署服务器的 IP 地址root /usr/share/nginx/html;  # Nginx 的根目录index index.html;location / {try_files $uri $uri/ /index.html;}location /api/v1/ {proxy_pass http://122.228.26.226:36519/api/v1/; # 你的后端服务地址proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}location /static/ {alias /usr/share/nginx/html/static/;expires 1y;add_header Cache-Control "public, max-age=31536000, immutable";}location /favicon.ico {try_files $uri =404;}location /app-loading.css {try_files $uri =404;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   /usr/share/nginx/html;}}
}

步骤 3: 构建和运行 Docker 容器

1、构建 Docker 镜像

使用以下命令构建 Docker 镜像:

cd /var/v3-admin-vite
docker build -t my-vue-app .

这将使用 Dockerfile 来构建名为 my-vue-app 的 Docker 镜像。

2、运行 Docker 容器

构建完成后,运行容器:

docker run -d -p 80:80 --name my-vue-app-container my-vue-app

- -d:后台运行容器。

- -p 80:80:将容器的 80 端口映射到服务器的 80 端口。

- --name my-vue-app-container:将容器命名为 my-vue-app-container

步骤 4: 访问应用

部署完成后,可以通过访问服务器的 IP 地址在浏览器中查看应用。

http://<服务器IP>

此时,如果没有错误,应该能看到你的 Vue 项目正常运行。

指令总结:

在服务器上执行以下指令即可部署完成:

docker load -i /var/v3-admin-vite/nginx-alpine.tar
cd /var/v3-admin-vite
docker build -t my-vue-app .
docker run -d -p 80:80 --name my-vue-app-container my-vue-app

常见问题排查

1、504 Gateway Timeout

如果你依然遇到 504 Gateway Timeout 问题,可能是后端接口无法响应,建议检查:

- 后端服务是否正常运行。

- Nginx 的代理配置是否正确,尤其是代理地址和端口。

2、修改 Nginx 配置后重启

如果你对 nginx.conf 进行了修改,可以通过以下命令重启容器:

docker restart my-vue-app-container

或者停止并重新运行容器:

docker stop my-vue-app-container
docker rm my-vue-app-container
docker run -d -p 80:80 --name my-vue-app-container my-vue-app

这篇关于前端vue项目服务器部署(docker)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1147487

相关文章

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

springboot项目中常用的工具类和api详解

《springboot项目中常用的工具类和api详解》在SpringBoot项目中,开发者通常会依赖一些工具类和API来简化开发、提高效率,以下是一些常用的工具类及其典型应用场景,涵盖Spring原生... 目录1. Spring Framework 自带工具类(1) StringUtils(2) Coll

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Spring Boot项目部署命令java -jar的各种参数及作用详解

《SpringBoot项目部署命令java-jar的各种参数及作用详解》:本文主要介绍SpringBoot项目部署命令java-jar的各种参数及作用的相关资料,包括设置内存大小、垃圾回收... 目录前言一、基础命令结构二、常见的 Java 命令参数1. 设置内存大小2. 配置垃圾回收器3. 配置线程栈大小

Spring Boot项目中结合MyBatis实现MySQL的自动主从切换功能

《SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能》:本文主要介绍SpringBoot项目中结合MyBatis实现MySQL的自动主从切换功能,本文分步骤给大家介绍的... 目录原理解析1. mysql主从复制(Master-Slave Replication)2. 读写分离3.

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo