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
  1. FROM nginx:1.19.3:指定基础镜像,这里使用的是 Nginx 的官方镜像,标签为 1.19.3

  2. COPY dist/ /usr/share/nginx/html:将 Vue 项目构建输出的 dist 目录中的所有文件复制到 Nginx 的默认网页根目录 /usr/share/nginx/html。这意味着当你访问 Nginx 服务器时,这些静态文件将被提供给客户端。

  3. COPY ./nginx/nginx.conf /etc/nginx/nginx.conf:复制自定义的 Nginx 主配置文件 nginx.conf 到容器中的 /etc/nginx/nginx.conf。这将覆盖默认的 Nginx 配置。

  4. 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:指定要运行的镜像的名称或标签,这里使用了之前构建的 myapp 镜像

查看镜像运行:

docker ps

 运行正常,直接访问地址: http://localhost:8002/

docker常用命令:

要中止正在运行的容器并重新运行它,你可以按照以下步骤操作:

  1. 找到容器 ID 或名称: 首先,你需要找到容器的 ID 或名称。你可以使用 docker ps 命令列出所有正在运行的容器。

    docker ps

  2. 停止容器: 使用 docker stop 命令加上容器的 ID 或名称来停止容器。

    docker stop <容器名称或ID>

    如果你为容器指定了名称(在这个例子中是 vue-app-container),你可以直接使用名称来停止它:

    docker stop vue-app-container

  3. 启动容器: 在停止了容器之后,你可以使用 docker run 命令重新启动它,这次使用正确的端口映射。如果 Nginx 配置为监听 8002 端口,你需要确保 Docker 容器的端口映射也相应地设置为 8002

    docker run -d -p 8002:8002 --name my-nginx-container my-nginx-image

    这个命令将容器内部的 8002 端口映射到宿主机的 8002 端口,并以分离模式启动容器。

  4. 验证容器状态:  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 

 访问地址:http://localhost:3000/  

噢耶,撒花✿✿ヽ(°▽°)ノ✿

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/722439.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

能提醒我重要工作事项的软件是什么 工作提醒软件

在工作中&#xff0c;我们总是不可避免地需要处理各种琐碎而重要的事项。然而&#xff0c;人的记忆力毕竟有限&#xff0c;尤其是在忙碌和高压的工作环境下&#xff0c;遗忘似乎成了一个难以避免的问题。想象一下&#xff0c;你因为一个疏忽忘记了一个重要的会议&#xff0c;或…

UE4_材质_雨滴涟漪效果ripple effect_ben教程

学习笔记&#xff0c;不喜勿喷&#xff01;侵权立删&#xff0c;祝愿生活越来越好&#xff01; 雨水落下时会产生这些非常漂亮的同心环波纹&#xff0c;我们要做的第一件事是创建一个单个的圆环遮罩动画&#xff0c;我们希望环在开始的时候在中心很小&#xff0c;然后放大&…

【漏洞复现】海康威视 综合安防管理平台软件 center_api_files 任意文件上传漏洞

免责声明&#xff1a; 本文内容旨在提供有关特定漏洞或安全漏洞的信息&#xff0c;以帮助用户更好地了解可能存在的风险。公布此类信息的目的在于促进网络安全意识和技术进步&#xff0c;并非出于任何恶意目的。阅读者应该明白&#xff0c;在利用本文提到的漏洞信息或进行相关测…

AI大模型的战场:通用大模型VS垂直大模型,谁会赢?

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

C语言 | Leetcode C语言题解之第162题寻找峰值

题目&#xff1a; 题解&#xff1a; int findPeakElement(int* nums, int numsSize) {int ls_max0;for(int i1;i<numsSize;i){if(nums[ls_max]>nums[i]);else{ls_maxi;}}return ls_max; }

部署LVS-NAT群集

目录 LVS-NAT模式部署 ​1.准备工具 2.所有虚拟机初始化 3.配置NFS共享存储&#xff08;20.0.0.40&#xff09; 3.1安装软件包 3.2创建共享目录和测试文件 4.web服务器部署&#xff08;20.0.0.20 20.0.0.30配置相同&#xff09; 4.1yum安装nginx服务 4.2测试nfs共享服…

上海科技博物馆超薄OLED柔性壁纸屏应用方案

产品&#xff1a;2组55寸OLED柔性屏2x1 特点&#xff1a;嵌入墙体&#xff0c;与空间装饰融入一体 用途&#xff1a;播放文物展示 一、项目背景 上海科技博物馆作为展示科技与文化的交汇点&#xff0c;一直致力于为观众提供沉浸式的参观体验。为了提升文物展示的现代化和科技感…

计算机网络:运输层 - 概述

计算机网络&#xff1a;运输层 - 概述 运输层的任务端口号复用与分用UDP协议首部格式 TCP协议面向字节流 运输层的任务 物理层、数据链路层以及网络层&#xff0c;他们共同解决了将主机通过网络互联起来所面临的问题&#xff0c;实现了主机到主机的通信。 网络层的作用范围是…

RIP路由协议汇总、版本兼容、定时器、协议优先级配置(华为)

#交换设备 RIP路由协议汇总 一、原理概述 当网络中路由器的路由条目非常多时&#xff0c;可以通过路由汇总&#xff08;又称路由汇聚或路由聚合&#xff09;来减少路由条目数&#xff0c;加快路由收敛时间和增强网络稳定性。路由汇总的原理是&#xff0c;同一个自然网段内的…

python GUI开发: tkinter菜单创建,记事本和画图软件综合项目的实战演练

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

Python基础用法 之 运算符

1.算数运算符 符号作用说明举例加与“”相同 - 减与“-”相同*乘 与“ ”相同 9*218/除 与“ ”相同 9/24.5 、6/32.0//求商&#xff08;整数部分&#xff09; 两个数据做除法的 商 9//24%取余&#xff08;余数部分&#xff09; 是两个数据做除法的 余数 9%21**幂、次方2**…

LabVIEW在SpaceX的应用

结合真实的资料介绍LabVIEW在SpaceX的应用&#xff0c;涵盖自动化测试系统、数据采集与监控、可视化与分析、模块化设计与扩展&#xff0c;以及效率与可靠性的提高。 ​ 自动化测试系统 LabVIEW在SpaceX的自动化测试系统中发挥了关键作用。自动化测试是确保SpaceX火箭及其子系…

Boosting原理代码实现

1&#xff0e;提升方法是将弱学习算法提升为强学习算法的统计学习方法。在分类学习中&#xff0c;提升方法通过反复修改训练数据的权值分布&#xff0c;构建一系列基本分类器&#xff08;弱分类器&#xff09;&#xff0c;并将这些基本分类器线性组合&#xff0c;构成一个强分类…

k8s自动补全工具和UI管理界面

分享两个有利于K8S的工具 目录 分享两个有利于K8S的工具 一、部署Dashboard&#xff08;主节点&#xff09; 介绍 1.1、查看集群状态 1.2、下载yaml文件并运行Dashboard 1.3、部署服务 1.4、创建访问账户、获取token&#xff08;令牌&#xff09; 1.5、浏览器访问Dash…

汽车空调制冷系统部件蒸发器

蒸发器是空调系统中一个很重要的部件&#xff0c;蒸发器严格来说就是一个冷热交换器&#xff0c;蒸发器会吸收空气中的热量&#xff0c;风通过后就变成冷风达到了制冷的目的。蒸发器主要由加热室和蒸发室两部分组成。. 空调蒸发器在蒸发箱里面&#xff0c;蒸发箱在仪表台里面&a…

《LLM探秘系列》(2):解锁大模型核心概念

&#x1f389; AI学习星球推荐&#xff1a; GoAI的学习社区 知识星球是一个致力于提供《机器学习 | 深度学习 | CV | NLP | 大模型 | 多模态 | AIGC 》各个最新AI方向综述、论文等成体系的学习资料&#xff0c;配有全面而有深度的专栏内容&#xff0c;包括不限于 前沿论文解读、…

【Java】已解决java.util.ConcurrentModificationException异常

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决java.util.ConcurrentModificationException异常 一、分析问题背景 java.util.ConcurrentModificationException异常是Java集合框架中常见的一个运行时异常。这个异常通常会…

HumbleBundle捆绑包6月18号推出38件Unity和Unreal的3D模型捆绑包美术工具道具环境模块化恐怖FPS和RPG赛博20240618

HumbleBundle今天更新了新的捆绑包&#xff0c;Unity和Unreal的无限创作主题&#xff0c; 主要是场景环境模型、工具、道具等合集&#xff0c;质量挺高。 非常适合FPS、模拟经营、RPG等类型游戏。 HumbleBundle捆绑包6月18号推出38件Unity和Unreal的3D模型捆绑包美术工具道具环…

「51媒体」上海电视台媒体邀约专访怎么做?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 电视台专访通常会对一些热门话题&#xff0c;行业热点&#xff0c;或者新闻焦点&#xff0c;邀请嘉宾进行访谈。企业如果想要在电视台进行专访&#xff0c;通常要有合适的时机和选题。 下…

构建数字化校园,开启创新教育模式

在当今信息化时代&#xff0c;教育的转型升级已成为推动社会进步与发展的关键力量。构建数字化校园&#xff0c;不仅是对传统教育模式的革新&#xff0c;更是开启一场以技术赋能教育、创新驱动成长的教育革命。这一进程旨在通过深度融合信息技术与教育教学实践&#xff0c;重塑…