使用docker构建vue项目并成功运行在本地和线上

news2025/1/13 13:10:22

先说本地环境

windows10 + node + vue + docker都已经安装齐全

获取nginx镜像

因为要用这个镜像来构建你的vue项目,就像给vue项目提供一个环境一样

docker pull nginx

创建 nginx config配置文件

在项目根目录下创建文件default.conf

server {
    listen       80;
    server_name  localhost; # 修改为docker服务宿主机的ip, 经测试不用修改也可以

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

 该配置文件定义了首页的指向为/usr/share/nginx/html/index.html, 所以我们可以一会把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下。

创建Dockerfile文件

在项目根目录下创建Dockerfile文件,写入下面内容

FROM nginx

RUN rm /etc/nginx/conf.d/default.conf

ADD default.conf /etc/nginx/conf.d/

COPY dist/ /usr/share/nginx/html/

说明

  • FROM nginx:该镜像是基于nginx:latest镜像构建的
  • RUN rm /etc/nginx/conf.d/default.conf:删除目录下的default.conf文件
  • ADD default.conf /etc/nginx/conf.d/:将default.conf复制到/etc/nginx/conf.d/下,用本地的default.conf配置来替换nginx镜像里的默认配置
  • COPY dist/ /usr/share/nginx/html/:将项目根目录下dist文件夹(构建之后才会生成)下的所有文件复制到镜像/usr/share/nginx/html/目录下

 生成生成环境包

首先确保安装了node.js,npm可用

在项目根目录下执行下面命令(和package.json文件同级)

安装依赖

npm install

构建

npm run build

执行结束之后会在项目根目录下生成一个dist的文件夹

构建docker镜像

docker build -t cvport .

注意不要少了最后的“.”(点)

-t是给镜像命名,.(点)是基于当前目录的Dockerfile来构建镜像

查看本地镜像

docker images

 到这里我们的vue应用镜像已经创建成功,接下来,我们基于该镜像启动一个docker容器

启动docker容器 

docker run -d -p 9090:80 --name cvpod cvport
  • docker run:基于镜像启动一个容器
  • -d:后台方式启动
  • -p 9090:80: 端口映射,将宿主机的9090端口映射到容器的80端口
  • --name:容器名,我起的叫mms
  • zz-mms:要启动的镜像名称

查看启动的容器 

docker ps

 访问

 现在我们已经启动了,访问宿主机的地址:9090就可以看到我们部署的网站了

部署到服务器上

同样的操作部署到服务器上后,输入 服务器ip:9090 端口即可访问,如果不行,请开启服务器的安全组里面,添加9090端口:

 

跨域

如果你的后端接口是在别的服务器上部署的,这时候我们的default.conf就要加一个反向代理,使用下面的default.conf,然后重新构建docker镜像,启动

server {
    listen       80;
    server_name   49.235.160.132; # 修改为docker服务宿主机的ip

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
    location /pro-api{ # pro-api是vue项目里.env.production里的地址
    proxy_pass 1.1.1.1;  # 这里写的是你后端接口的地址
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

docker常用命令

Docker环境信息   info、version
镜像仓库命令      login、logout、pull、push、search
镜像管理          build、images、import、load、rmi、save、tag、commit
容器生命周期管理  create、exec、kill、pause、restart、rm、run、start、stop、unpause
容器运维操作      attach、export、inspect、port、ps、rename、stats、top、wait、cp、diff、update
容器资源管理      volume、network
系统信息日志      events、history、logs
1.events打印容器的实时系统事件
2.history 打印出指定镜像的历史版本信息
3.logs打印容器中进程的运行日志
docker --help       #查看docker命令
docker info         #docker 详细信息,镜像和容器
docker version      #查看docker版本
帮助文档地址:https://docs.docker.com/reference/

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

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

相关文章

火灾报警产品-火灾探测报警产品

消防产品,是指专门用于火灾预防、灭火救援和火灾防护、避难、逃生的产品。适用范围 适用于消防联动控制系统设备、防火卷帘控制器、线型感温火灾探测器、城市消防远程监控产品。认证模式 型式试验初始工厂检查获证后监督。申请资料 1.认证委托人/生产者/生产企业的资…

全面支持 PyTorch 2.0:BladeDISC 5 月~11 月新功能发布

作者:BladeDISC研发团队 BladeDISC 上一次更新主要发布了 GPU AStitch 优化,方法来源于我们发表在 ASPLOS 2022上的论文AStitch。这一次,我们发布了 0.3.0 版本。 本次更新中 BladeDISC 社区全面支持了 PyTorch 2.0 编译,推进了…

同城跑腿系统搭建,灵活的配送选择满足更多场景

为了提供更加便捷的生活服务,同城跑腿系统搭建通过线上的同城跑腿服务平台,在网上用户可以申请同城服务的需求,平台的相关的工作人员快速的响应接单,快速进行同城的配送跑腿服务。 同城跑腿系统搭建,功能少是万万不能…

微信小程序第四篇:生成图片并保存到手机相册

系列文章传送门: 微信小程序第一篇:自定义组件详解 微信小程序第二篇:七种主流通信方法详解 微信小程序第三篇:获取页面节点信息 目录 一、封装分享组件 二、定义用户授权方法 三、调用流程 首先我们看一下要完成的效果&#x…

地理空间开发包 TatukGIS Developer Kernel 11.72.X Crack

TatukGIS Developer Kernel (DK) 是专业级 GIS SDK(软件开发工具包),各行各业的客户都使用它来开发自定义 GIS 应用程序或向现有产品添加地理空间功能。DK 可作为多个 SDK 版本使用,每个版本都针对特定的开发平台进行本地编译&…

胡扯系列之私人AI助手系统的分析与设计

背景 随着时代的发展,计算机算力的提升和近些年来AI模型的井喷以及发展。人工智能应用已经深入我们的日常生活。如人脸识别,无人驾驶等等,同时为了更好地与用户进行交互,完成特定功能,智能对话助手应运而生。如今大量…

某宝付费买的价值上万的60G的Python学习资源,0基础轻松赚钱到手软,请低调使用,禁止外传

前言 你是否 还在为升职加薪发愁? 苦于领导看不到自己更多长处? 还在为房贷,车贷,生计而发愁? 苦于不上班如何轻松赚快钱补贴家用? 为了帮助财务、设计、运营、策划、销售、HR、金融从业者、电商从业…

【单目3D目标检测】MonoFlex论文精读与代码解析

文章目录PrefaceAbstractContributionsPipelineProblem DefinitionDecoupled Representations of ObjectsInside & Outside ObjectsEdge FusionLossVisual Properties Regression2D DetectionDimension EstimationOrientation EstimationKeypoint EstimationAdaptive Depth…

Docker网络模式与配置

目录 🎈🎈1. Docker网络模式🏃‍♂️🏃‍♂️ 🏃‍♂️🏃‍♂️2. 外部访问docker容器🏃‍♂️🏃‍♂️ 🎈🎈3. 创建自定义网络:(设…

尚医通 (三十一) --------- 手机登录

目录一、登录需求1. 登录效果2. 登录需求二、登录1. 搭建 service-user 模块2. 添加用户基础类3. 登录 API 接口4. 生成 token5. 阿里云短信6. 登录前端7. 登录全局事件8. myheader.vue 完整代码三、用户认证与网关整合一、登录需求 1. 登录效果 2. 登录需求 ① 登录采取弹出…

Python爬虫实战,requests+time模块,爬取某招聘网站数据并保存csv文件(附源码)

前言 今天给大家介绍的是Python爬取某招聘网站数据并保存本地,在这里给需要的小伙伴们代码,并且给出一点小心得。 首先是爬取之前应该尽可能伪装成浏览器而不被识别出来是爬虫,基本的是加请求头,但是这样的纯文 本数据爬取的人会…

ImmunoChemistry丨艾美捷抗体夹心ELISA开发试剂盒说明书

使用ImmunoChemistry艾美捷抗体夹心ELISA开发试剂盒评估检测可行性并优化ELISA性能参数。抗体夹心ELISA开发试剂盒提供了八种特殊配制的ELISA溶液和一个模板,用于抗体夹心ELISA测试的初始开发和优化。全面的ELISA开发手册提供了评估初始检测可行性和优化ELISA性能参…

关于 npm run buildprod 报错问题 :文件名、目录名或卷标语法不正确

引言 vue开发基本完成后进行打包时出现错误,这个错误以前没有遇到过,所以在这里激励 参考文章1 参考文章2 问题描述 在idea中运行npm run build:prod打包vue时出现报错 E:\Allworkspaces\idea-workspace\Project\vue-project\my-blog\vue-admin-te…

代码随想录第三天

专题:链表 题目:移除链表元素 题意:删除链表中等于给定值 val 的所有节点。 示例 : 输入:head [1,2,6,3,4,5,6], val 6 输出:[1,2,3,4,5] 解题思想: 我们为了统一操作,我们给链表…

身份证实名认证API接口有什么意义与作用?

身份证实名认证API接口有什么意义? 中国公民的身份证是一种对外证明自己身份的有效证件,随着国家对实名制要求的落实,工作与生活中许多场景都会需要进行身份验证。比如出门外出乘座火车与飞机时、注册互联网络平台时、网络游戏与购物时等等&a…

微信小程序怎么注册?【微信小程序制作】

即使在目前小程序盛行的时代,仍然有很多人在问微信小程序怎么注册、微信小程序怎么做的问题,也证明了我们对于微信小程序的需求依然巨大。那么微信小程序怎么注册呢?下面给大家简单介绍。 步骤1:注册小程序账号 我们在微信公众平…

启封化工行业管理方案—危化品的管理(1)

联合国危险品编码管理 什么是危化品? 危化品是指可能伤害人、其他生物体、财产或环境的固体、液体或气体。这些危险品在运输时始终受到规章制度的约束。运输这些危险品的团队是训练有素的专业人员。使用标签时,存储标签的容器或存储位置通常用菱形标牌标…

2022年疫情下的卡塔尔世界杯,你看了么,盘点一下爆冷的赛事

卡塔尔世界杯卡塔尔世界杯世界杯出现的爆冷比赛沙特阿拉伯 VS 阿根廷(1:2)德国 VS 日本 (1:2)比利时 VS 摩洛哥 (0:2)摩洛哥VS 加拿大 (2:1)日本 VS 西班牙 (2:1)摩洛哥 VS 西班牙(3:0)总结卡塔尔世界杯 卡塔尔世界杯有32个国家参…

数据结构与算法(Java版) | 几个经典的算法面试题(下)

上一讲,我给大家介绍了两个经典算法面试题,即字符串匹配问题和汉诺塔游戏,这一讲,我再来给大家介绍两个经典算法面试题,它们就是八皇后问题和马踏棋盘算法,注意,马踏棋盘算法也被称为骑士周游问…

springsecurity--Config层代码常用代码指令

前提搭建 使我们的类继承于WebSecurityConfigurerAdapter这个类 同时调用service还有新建一个bean方法 Bean public PasswordEncoder getPassword() {return new BCryptPasswordEncoder(); } 这个代码是可以自定义账户和密码 自定义登录账户和密码写在service类中 下方的红框…