vue项目的docker部署

这篇具有很好参考价值的文章主要介绍了vue项目的docker部署。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

很久没有接触前端了,最近需要发布一个前端小项目,好不犹豫的选择了docker,方便啊!(其实原始nginx也很方便)
下面记录一下:
开发环境vscode

发布环境 centos7

  • 项目工程结构

vue项目的docker部署
我们需要一个dockerfile文件,一个nginx的配置文件

  • dockerfile文件配置内容如下,我们以一个nginx镜像为基础镜像打包我们自己的镜像,内容如下图所示
# 基础镜像使用Nginx
FROM nginx
# 作者
MAINTAINER llp
# 添加时区环境变量,亚洲,上海
ENV TimeZone=Asia/Shanghai    
# 将前端dist文件中的内容复制到nginx目录
COPY ./dist/  /usr/share/nginx/html/
# 用本地的nginx配置文件覆盖镜像的Nginx配置
COPY nginx.conf /etc/nginx/nginx.conf
# 暴露端口
EXPOSE 80
  • 对生产环境变量的定义,如下图所示,请求的接口我们统一用一个指定的url前缀代理,这样方便等会使用nginx做一个重定向的代理
    vue项目的docker部署
  • nginx.conf配置文件,代理部分,通过对prod-api的重定向代理,完成对后台接口的数据请求
    vue项目的docker部署vue项目的docker部署
  • 到此我们基本工作就准备完毕了,接下来就是打包镜像和运行容器了
  • npm run build 前端打包发布
  • 将发布后的目录 和2个配置文件,上传到安装有docker的服务器中,如下图

vue项目的docker部署

  • 进入该目录后 构建镜像
docker build -t i_llpcml .

构建成功后,运行容器,这里为了方便修改nginx的配置,我们将nginx的配置挂载出来,方便修改,nginx.conf本地配置如下所示文章来源地址https://www.toymoban.com/news/detail-413256.html

docker run -di -v /home/llp_docker/llpcml/nginx.conf:/etc/nginx/nginx.conf --name=llpcml -p 8099:80 i_llpcml 
  • 访问8099端口,就可以看见我们的项目了,收工!

到了这里,关于vue项目的docker部署的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue前端使用Docker部署

    在上一篇文章中,我们介绍了如果在CentOS上安装docker环境,本文则是介绍docker的具体项目实践,主要介绍如果通过docker容器来部署vue前端项目。本文需要基于vue项目已经开发完成,并且docker环境已经准备好。思路是Docker镜像中使用nginx反向代理运行vue前端项目。 编译发布vue项

    2024年02月07日
    浏览(9)
  • Docker 安装 Nginx 部署前端项目

    注意 :这里有一个需要注意的点,Nginx 一般是根据配置文件启动的。 如果我们在第一次启动的时候就挂载目录,那么因为我们宿主机是空文件,会直接导致 Nginx 容器内的配置文件被覆盖,致使启动失败。 所以的步骤如下 1、宿主机创建好要挂载的目录 -p  参数的作用就是允许

    2024年04月11日
    浏览(18)
  • 三分钟学会使用 Docker 部署前端项目

    本篇文章带领读者利用Docker+XShell+阿里云服务器进行简单的前端网页部署。笔者用到的环境如下: 本机操作系统:Windows 10(因此直接安装 Docker Desktop,图形化操作,较为方便) 云服务器:阿里云 2核 2G(Ubantu) 一些本人参考的资料整理: Docker中文文档:Docker — 从入门到实

    2024年02月22日
    浏览(22)
  • Nginx部署Vue前端项目

    目录 一、安装Nginx 1、安装完成 2、启动Nginx 3、问题 二、修改Nginx配置文件 系统环境:Mac Pro—10.15.7版本 Nginx版本:1.19.6 Nginx的配置文件目录:/usr/local/etc/nginx Nginx的安装目录:/usr/local/Cellar/nginx 可能遇到的报错一:nginx: [error] open() \\\"/usr/local/var/run/nginx.pid\\\" failed (2: No such file

    2024年02月11日
    浏览(19)
  • Linux部署前端Vue项目

    1.1 部署Vue项目 打包项目 在命令行终端,输入命令,打包项目: 将生成的dist文件夹下的所有内容复制到tomcat的webapps下 启动tomcat,并输入访问地址 yygh-admin为项目名 注意: 如果输入url后,页面一片空白,可能是因为js、css文件找不到,可能是打包路径问题: vue-cli3以上: 将

    2024年02月03日
    浏览(16)
  • Vue项目前端部署——nginx方式

    随便在网上找一篇文章,下载安装之后,启动nginx 在项目根目录下 运行npm run build 进行编译打包 打包完成之后,在项目根目录下会多一个dist目录 因为使用到nginx进行代理,所以vue.config.js里面的代理是不会生效的,我们使用nginx来配置反向代理,配置完成保存文件 使用service

    2024年02月12日
    浏览(23)
  • tomcat部署前端vue项目(项目上线具体操作)

    在linux上安装tomcat可以直接在linux服务器上通过wget方式直接下载tomcat,也可以把本地的tomcat上传到服务器。 具体操作步骤如下: 创建一个tomcat目录,位置可以根据自己情况选择 将上传的tomcat复制到上面目录 进入tomcat目录 解压tomcat 进入tomcat的bin目录 启动tomcat 关闭tomcat 删除

    2024年02月01日
    浏览(19)
  • nginx: 部署前端项目的详细步骤(vue项目build打包+nginx部署)

    目录 第一章 前言 第二章 准备工作 2.1 项目打包理解 2.1.1 打包命令 2.1.2 理解npm run serve/dev 和 npm run build命令 2.2 nginx参数配置理解 2.2.1 nginx常用基本命令 2.2.2 默认配置 2.2.3 搭建不同网站的站点 2.2.4 禁止访问的目录以及一键申请SSL证书验证目录相关设置 2.2.5 根据文件类型设置

    2024年02月04日
    浏览(28)
  • Docker容器部署前端Vue服务——手把手教学

    需要工具: Xftp Xshell   首先对前端项目进行打包:npm run build   打包完成 ​ 在项目中生成dist文件: 通过Xshell在/home目录下创建项目文件夹 通过Xftp将打包的dist文件上传到服务器的项目文件夹下; 利用Xshell在拉取nginx镜像 在项目文件夹下编写nginx config配置文件 default.conf内容

    2024年02月07日
    浏览(18)
  • 项目部署后,前端vue代理失效问题解决

    title:工作日记,前段后分离项目,在部署时遇到的问题,Vue项目打包成dist文件之后放在服务器上,通过运行java-jar包,在application.yml中引入静态资源的方式访问前端。如下图所示: 问题1 :前端页面是可以访问到了,但是后端访问不到,在本地中运行就可以。 首先前端我在

    2024年02月03日
    浏览(15)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包