前端Vue项目整合nginx部署到docker容器

news2024/11/29 0:07:08

一、通过Dockerfile整合nginx方法:

  • 1,使用Vue CLI或npm脚本构建生产环境下的Vue项目。
npm run build
or
yarn build
  • 2,构建完成后,项目目录中会生成一个dist文件夹,里面包含了所有静态资源文件(HTML、CSS、JavaScript)。
  • 3,创建Dockerfile文件
# 使用官方Nginx镜像作为基础镜像
FROM nginx:latest
#复制前端项目的构建文件到Nginx的html目录
COPY  /path/dist/ /usr/share/nginx/html
#复制自定义的Nginx配置文件到容器内
COPY nginx.conf /etc/nginx/nginx.conf
#暴露端口
EXPOSE 80
#设置容器启动时执行的命令
CMD ["nginx", "-g", "daemon off;"]

注意: dist文件夹的实际路径,并且这个路径是在Dockerfile的上下文中的路径。你可能需要将Vue项目和Dockerfile放在同一个目录下,或者使用相对路径

  • 4、自定义nginx.conf配置文件,添加或修改以下内容以指向Vue项目的dist目录,并配置静态文件服务。
user nginx;
worker_processes auto;
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" '
                      '$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;
    tcp_nodelay     on;
    keepalive_timeout  65;
    types_hash_max_size 2048;

    include /etc/nginx/conf.d/*.conf;
    
    # 自定义服务器配置
    server {
        listen       80;
        server_name  localhost;

        #指定前端项目所在的位置
        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        # 其他自定义配置,如代理设置、重写规则等
        # 反向代理方式
        # location /api {
        #    rewrite /api/(.*) /$1 break;
        #   proxy_pass http://aipro:8080;
        # }
        # 错误页面配置
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
    }
    # 其他服务器配置...
}

注意:由于我们将使用Docker挂载,所以root指令应指向容器内的挂载点,即/usr/share/nginx/html。

  • 5,用了Dockerfile并构建了镜像,则运行以下命令:
docker run -d --name myverify -p 80:80  --network mybridge verify
  • 6,验证部署
    打开浏览器,访问你的域名或服务器IP地址,应该能看到Vue应用程序。

二、通过挂载了配置文件和静态文件目录方法

  • 1,准备Nginx容器,拉取Nginx镜像:
docker pull nginx:latest
or
docker pull nginx:xxx  # xxx为具体版本号
  • 2,创建挂载目录
mkdir -p /home/nginx/conf
mkdir -p /home/nginx/log
mkdir -p /home/nginx/html
  • 3,创建Nginx配置文件:
    在宿主机上创建Nginx外部挂载的配置文件,例如/home/nginx/conf/nginx.conf。这个文件将包含自定义的Nginx配置。
server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;  # 替换为你的域名或IP地址

    root /usr/share/nginx/html;  # 容器内的静态文件根目录,将通过挂载实现
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # 单页面应用路由配置
    }

    # 其他配置,如日志、错误处理等
    error_log /var/log/nginx/yourapp.error.log;
    access_log /var/log/nginx/yourapp.access.log;
}
  • 4,如果你选择在宿主机上手动复制,可以使用以下命令:
cp -r /path/to/your/vue/app/dist/* /home/nginx/html/
  • 5,挂载了配置文件和静态文件目录,则运行以下命令:
docker run -d -p 80:80 --name your-nginx-container-name \
-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/nginx/log:/var/log/nginx \
-v /home/nginx/html:/usr/share/nginx/html \
nginx:latest
  • 6,验证部署
    打开浏览器,访问你的域名或服务器IP地址,应该能看到Vue应用程序。
    检查Nginx日志(/var/log/nginx/yourapp.error.log和/var/log/nginx/yourapp.access.log)以获取详细的错误信息(如果访问出现问题)。
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《Vue零基础入门教程》第十课:属性绑定指令

往期内容 《Vue零基础入门教程》第一课:Vue简介 《Vue零基础入门教程》第二课:搭建开发环境 《Vue零基础入门教程》第三课:起步案例 《Vue零基础入门教程》第四课:应用实例 《Vue零基础入门教程》第五课:挂载 《…

计算机网络socket编程(5)_TCP网络编程实现echo_server

个人主页:C忠实粉丝 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝 原创 计算机网络socket编程(5)_TCP网络编程实现echo_server 收录于专栏【计算机网络】 本专栏旨在分享学习计算机网络的一点学习笔记,欢迎大家在评论区交…

【适配】屏幕拖拽-滑动手感在不同分辨率下的机型适配

接到一个需求是类似下图的3D多房间视角,需要拖拽屏幕 问题 在做这种屏幕拖拽的时候发现,需要拖拽起来有跟手的感觉,会存在不同分辨率机型的适配问题。 即:美术调整好了机型1的手感,能做到手指按下顶层地板上下挪动&…

C#调用C++ DLL方法之C++/CLI(托管C++)

托管C与C/CLI前世今生 C/CLI (C/Common Language Infrastructure) 是一种用于编写托管代码的语言扩展,它是为了与 .NET Framework 进行互操作而设计的。C/CLI 是 C 的一种方言,它引入了一些新的语法和关键字,以便更好地支持 .NET 类型和垃圾…

python excel接口自动化测试框架!

今天采用Excel继续写一个接口自动化测试框架。 设计流程图 这张图是我的excel接口测试框架的一些设计思路。 首先读取excel文件,得到测试信息,然后通过封装的requests方法,用unittest进行测试。 其中,接口关联的参数通过正则进…

[RabbitMQ] 重试机制+TTL+死信队列

🌸个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 🏵️热门专栏: 🧊 Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 🍕 Collection与…

前端入门之VUE--基础与核心

前言 VUE是前端用的最多的框架;这篇文章是本人大一上学习前端的笔记;欢迎点赞 收藏 关注,本人将会持续更新。 Vue学习笔记 用于构建用户界面的渐进式框架 构建用户界面:基于数据动态渲染页面渐进式:循序渐近的学…

java基础知识(常用类)

目录 一、包装类(Wrapper) (1)包装类与基本数据的转换 (2)包装类与String类型的转换 (3)Integer类和Character类常用的方法 二、String类 (1)String类介绍 1)String 对象用于保存字符串,也就是一组字符序列 2)字符串常量对象是用双引号括起的字符序列。例如:&quo…

嵌入式驱动开发详解2(设备挂载问题)

文章目录 前言设备号设备号的组成设备号的分配静态分配动态分配 驱动挂载与卸载设备节点创建驱动挂载出现问题 前言 驱动的设备挂载和卸载是十分重要的内容,一旦操作不当可能会导致系统崩溃,接下来我将用字符设备的驱动挂载原理进行详细讲解&#xff0c…

谈谈微服务的常用组件

由于微服务给系统开发带来了一些问题和挑战,如服务调用的复杂性、分布式事务的处理、服务的动态管理等,为了更好地解决这些问题和挑战,各种微服务治理的组件应运而生,充当微服务架构的基石和支撑,常用组件如下表&#…

【数字图像处理+MATLAB】通过迭代全局阈值处理算法(Iterative Global Algorithm)实现图像分割

引言 图像分割是将数字图像划分为多个区域(或像素的集合)的过程,这些区域通常对应于真实世界的物体或图像中的特定部分。图像分割的目标是简化或改变图像的表示形式,使得图像更容易理解和分析。图像分割通常用于定位图像中的物体…

【三维生成】Edify 3D:可扩展的高质量的3D资产生成(英伟达)

标题:Edify 3D: Scalable High-Quality 3D Asset Generation 项目:https://research.nvidia.com/labs/dir/edify-3d demo:https://build.nvidia.com/Shutterstock/edify-3d 文章目录 摘要一、前言二、多视图扩散模型2.1.消融研究 三、重建模型…

在SQLyog中导入和导出数据库

导入 假如我要导入一个xxx.sql,我就先创建一个叫做xxx的数据库。 然后右键点击导入、执行SQL脚本 选择要导入的数据库文件的位置,点击执行即可 注意: 导入之后记得刷新一下导出 选择你要导出的数据库 右键选择:备份/导出、…

HDR视频技术之三:色度学与颜色空间

HDR 技术的第二个理论基础是色度学。从前面的内容中可以了解到,光学以及人类视觉感知模型为人类提供了解释与分析人类感知亮度的理论基础,但是 HDR 技术不仅仅关注于提升图像与视频的亮度范围,同时也关注于提供更加丰富的色彩。因此&#xff…

通信与网络安全之IPSEC

IPSec(IP Security)是IETF制定的为保证在Internet上传送数据的安全保密性能的三层隧道加密协议。IPSec在网络层对IP报文提供安全服务。IPSec协议本身定义了如何在IP数据包中增加字段来保证IP包的完整性、 私有性和真实性,以及如何加密数据包。…

Redis的管道操作

在现代应用程序中,Redis作为一种高性能的内存数据库,被广泛用于缓存、消息队列、实时分析等场景。为了进一步提高Redis的性能,Redis提供了管道(Pipeline)操作,允许客户端将多个命令一次性发送到服务器&…

67 mysql 的 间隙锁

前言 我们这里主要是 来看一下 mysql 中的 间隙锁 间隙锁 主要存在的地方一般就是在 查询主键查询不到, 索引查询查询不到 的场景 然后 我们这里来调试一下 这里的整个流程, 间隙锁的加锁 以及 间隙锁的使用, 以及 间隙锁的释放 从逻辑上来说 间隙锁 锁定的是一个区间, 按照…

小米PC电脑手机互联互通,小米妙享,小米电脑管家,老款小米笔记本怎么使用,其他品牌笔记本怎么使用,一分钟教会你

说在前面 之前我们体验过妙享中心,里面就有互联互通的全部能力,现在有了小米电脑管家,老款的笔记本竟然用不了,也可以理解,毕竟老款笔记本做系统研发的时候没有预留适配的文件补丁,至于其他品牌的winPC小米…

Apache Zeppelin:一个基于Web的大数据可视化分析平台

今天给大家推荐一下 Apache Zeppelin,它是一个基于 Web 的交互式数据接入、数据分析、数据可视化以及协作文档 Notebook,类似于 Jupyter Notebook。 Apache Zeppelin 支持使用 SQL、Java、Scala、Python、R 等编程语言进行数据处理和分析,同时…

彻底理解如何保证ElasticSearch和数据库数据一致性问题

一.业务场景举例 需求: 一个卖房业务,双十一前一天,维护楼盘的运营人员突然接到合作开发商的通知,需要上线一批热门的楼盘列表,上传完成后,C端小程序支持按楼盘的名称、户型、面积等产品属性全模糊搜索热门…