VUE 项目如何使用 Docker+Nginx进行打包部署
一、Docker
- Docker 是一个容器化平台，允许你将应用程序及其依赖项打包在容器中。
- 使用 Docker，你可以创建一个包含 Vue.js 应用程序的容器镜像，并在任何支持 Docker 的环境中运行该镜像。
二、Nginx
- Nginx 是一个高性能的 HTTP 服务器和反向代理服务器，广泛用于提供静态文件和路由请求到后端服务。
- 在 Vue.js 应用程序的部署中，Nginx 可以用于：
- 作为静态文件服务器，提供构建后的 Vue.js 应用程序文件。
- 作为反向代理，将 API 请求转发到后端服务器。
三、Docker Nginx配置到vue--项目中使用
1. VUE 项目创建文件Dockerfile-private
FROM nginx:1.19.3 COPY dist/ /usr/share/nginx/html COPY ./nginx/nginx.conf /etc/nginx/nginx.conf COPY ./nginx/private/default.conf /etc/nginx/conf.d/default.conf
FROM nginx:1.19.3：指定基础镜像，这里使用的是 Nginx 的官方镜像，标签为 1.19.3。
COPY dist/ /usr/share/nginx/html：将 Vue 项目构建输出的 dist 目录中的所有文件复制到 Nginx 的默认网页根目录 /usr/share/nginx/html。这意味着当你访问 Nginx 服务器时，这些静态文件将被提供给客户端。
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf：复制自定义的 Nginx 主配置文件 nginx.conf 到容器中的 /etc/nginx/nginx.conf。这将覆盖默认的 Nginx 配置。
COPY ./nginx/private/default.conf /etc/nginx/conf.d/default.conf：复制自定义的 Nginx 配置文件 default.conf 到 Nginx 配置目录 /etc/nginx/conf.d/。这个文件将被 Nginx 加载以配置网站的行为，例如设置代理、重定向等。
Nginx文件：
nginx.conf文件
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" "$request_body"'
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
gzip on;
include /etc/nginx/conf.d/*.conf;
}nginx/private/default.conf
server {
listen 8002;
server_name localhost;
#charset koi8-r;
#access_log /var/log/nginx/host.access.log main;
gzip_static on;
gzip on;
gzip_min_length 1k;
gzip_comp_level 3;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
gzip_buffers 32 4k;
fastcgi_intercept_errors on;
server_tokens off;
client_max_body_size 102400m;
resolver 114.114.114.114 8.8.8.8 valid=120s;
set $sentry router.anban.cloud;
location / {
add_header Cache-Control no-cache;
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri /index.html;
}
location /abfuzz {
proxy_read_timeout 100s;
proxy_pass http://127.0.0.1:18800;
}
location /files {
rewrite ^/files(.*)$ $1 break;
proxy_pass http://127.0.0.1:18800;
proxy_http_version 1.1;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $http_host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
error_page 403 404 408 500 501 502 503 504 507 /index.html;
} 四、构建镜像并运行：
构建镜像：
docker build --platform linux/amd64 -f Dockerfile-private -t myapp .
docker build：Docker 构建命令，用于根据Dockerfile创建一个新的镜像。--platform linux/amd64：指定构建的目标平台为 Linux 架构的 amd64（64位）。-f Dockerfile-private：指定使用Dockerfile-private作为构建上下文的 Dockerfile。这表明你的构建配置可能在Dockerfile-private文件中定义，而不是默认的Dockerfile。-t myapp：给构建的镜像指定一个标签（tag），这里标签是myapp，这样你就可以通过这个名称来引用镜像。.（点）：表示 Docker
运行镜像：
docker run -d -p 3000:8002 --name vue-app-container myapp
docker run：Docker 运行命令，用于从镜像创建并启动一个新的容器。-d：以分离模式运行容器，在后台运行。-p 8002:8002：端口映射，将容器内部的 8002 端口映射到宿主机的 8002 端口。--name vue-app-container：为容器指定一个名称vue-app-container，方便后续管理和引用。myapp：指定要运行的镜像的名称或标签，这里使用了之前构建的myap镜像
查看镜像运行：
docker ps
运行正常，直接访问地址： http://localhost:8002/
docker常用命令：
要中止正在运行的容器并重新运行它，你可以按照以下步骤操作：
找到容器 ID 或名称： 首先，你需要找到容器的 ID 或名称。你可以使用 docker ps 命令列出所有正在运行的容器。
docker ps
停止容器： 使用 docker stop 命令加上容器的 ID 或名称来停止容器。
docker stop <容器名称或ID>
如果你为容器指定了名称（在这个例子中是 vue-app-container），你可以直接使用名称来停止它：
docker stop vue-app-container
启动容器： 在停止了容器之后，你可以使用 docker run 命令重新启动它，这次使用正确的端口映射。如果 Nginx 配置为监听 8002 端口，你需要确保 Docker 容器的端口映射也相应地设置为 8002。
docker run -d -p 8002:8002 --name my-nginx-container my-nginx-image
这个命令将容器内部的 8002 端口映射到宿主机的 8002 端口，并以分离模式启动容器。
验证容器状态： docker ps 来检查容器是否成功启动。
五、基础配置demo（Dockerfile和nginx/default.conf）
刚才第三点，是我项目中使用的配置，下面是一个很基础的配置，可以直粘贴代码使用
dockerfile文件
FROM nginx:1.19.3 COPY dist/ /usr/share/nginx/html COPY ./nginx/default.conf /etc/nginx/default.conf
nignx/default.conf
server {
listen 80;
server_name localhost;
#charset koi8-r;
access_log /var/log/nginx/host.access.log main;
error_log /var/log/nginx/error.log error;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
location /abfuzz {
proxy_read_timeout 100s;
proxy_pass http://127.0.0.1:18800;
}
}构建镜像：
docker build --platform linux/amd64 -f Dockerfile -t test1 .
运行镜像：
docker run -d -p 3000:80 --name test1-container test1
查看镜像状态：
docker ps
到此这篇关于VUE 项目用 Docker+Nginx进行打包部署的文章就介绍到这了,更多相关docker nginx打包部署vue项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue-resource请求实现http登录拦截或者路由拦截的方法
这篇文章主要介绍了vue-resource请求实现http登录拦截或者路由拦截的方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
最近在写vue的项目中，遇到一个需求，点击编辑，显示弹框，在弹框中的富文本编辑器中编辑自定义文本样式，可以上传图片并回显。接下来通过本文给大家介绍vue中wangEditor的使用及回显数据获取焦点的问题，一起看看吧2021-09-09
今天小编就为大家分享一篇vue1.0和vue2.0的watch监听事件写法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本文主要介绍了vue调用谷歌授权登录获取用户通讯录的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
基于vue+echarts实现柱状图渐变色效果(每个柱子颜色不同)
前段时间的vue项目中用到了echarts柱状图,由于UI设计稿中要求使用渐变色,并且每个柱子的颜色不同,于是做了一番研究,现将我的实现方案分享如下2024-05-05
这篇文章主要介绍了详解Vue3 中的计算属性及侦听器，文章围绕主题的相关资料展开详细的内容介绍，具有一定的参考价值，需要的朋友可以看下一下2022-08-08
这篇文章主要介绍了Vue3如何获取来源路由问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了vue从仓库state中取不到数据的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要给大家介绍了关于vue中销毁定时器的几种解决方案,销毁定时器的操作一般是在beforeDestroy钩子中进行，根据定时器的数量不同可以有多种解决方法,需要的朋友可以参考下2023-08-08
vue-router重写push方法,解决相同路径跳转报错问题
这篇文章主要介绍了vue-router重写push方法,解决相同路径跳转报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论