用vue cli 创建一个vue项目,修改一下创建出来的项目,在页面上写一个前端接口请求,构建一版线上资源 ,基于nginx docker镜像构建成一个前端工程镜像,然后基于这个前端工程镜像,启动一个容器 vuenginxcontainer。 启动一个基于 node 镜像的容器 nodewebserver,提供后端接口。 修改vuenginxcontainer 的 nginx 配置,使前端...
3、然后在/home/vue-project/nginx 这个目录下要创建两个文件分别是:nginx的配置文件default.conf 和 docker用来生成镜像的文件dockerfile 3.1 default.conf配置文件内容如下:(有#号注释的地方都是要改成自己的,其他的不动。吐槽下,百度出来别人博客上的nginx配置他妈的一大堆配置,简单点不好吗真的是) server { ...
1.在Vue项目文件下,输入npm run build进行打包,项目下生成dist文件。 2.将dist文件上传到服务器中,在同目录下创建Dockerfile文件。 3.Dockerfile内容: FROM nginx MAINTAINER jam #将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面 COPY dist/ /usr/share/nginx/html/ 4.编译docker镜像 //-t ...
一、Docker 搭建 Nginx 参考 https://www.cnblogs.com/mangoubiubiu/p/16796373.html 二、部署 静态vue项目 1、将你打好的包上传至服务器 2、修改nginx配置 #管理台 location ~ /{ root /apps/w
基于Centos 7 vue+nginx+docker 的前端项目部署 1.先在本地将vue项目建立,并且确定能跑起来使用npm run serve ctrl+鼠标左键在本地查看。 然后使用npm run build,会在本地生成一个dist文件。 然后建一个文件Dockerfile,文件内容可以在VS Code里面先写好,或者在linux服务器上面编辑都可以。
在上一文中 通过IDEA集成Docker插件实现微服务的一键部署,但前后端分离的项目,除了后端微服务的部署之外,当然还少不了前端工程的部署。所以本篇讲述如何通过Docker安装Nginx实现前端Vue项目工程的部署。 一. 前言 在上一文中 传送门 通过IDEA集成Docker插件实现微服务的一键部署,但 youlai-mall ...
在上一文中点击跳转通过IDEA集成Docker插件实现微服务的一键部署,但youlai-mall是前后端分离的项目,除了后端微服务的部署之外,当然还少不了前端工程的部署。所以本篇讲述如何通过Docker安装Nginx实现前端Vue项目工程的部署。 二. Docker安装Nginx 1. 创建目录
1、安装最新的nginx 2、先简单nginx运行起来,方便后面我们拷贝容器内部的nginx配置文件 3、将容器中的配置文件复制到宿主机上 普通方式搭建的nginx只需要关注nginx.conf配置文件 docker方式搭建的 需要关注2个配置文件 nginx.conf和default.conf docker cped2f9784a0eb:/etc/nginx/nginx.conf ~/nginx/conf/ ...
docker load < nginx.tar 第一种方法: 启动docker上的nginx,将目录映射到服务器。(建议测试环境使用) 1.执行命令启动nginx docker run--detach--name test-nginx-p443:443-p80:80#映射html-v/home/nginx/html:/usr/share/nginx/html #映射nginx.conf文件-v/home/nginx/config/nginx.conf:/etc/nginx/nginx...
#将dist文件中的内容复制到/usr/share/nginx/html/这个目录下面COPYdist//usr/share/nginx/html/ 5. 构建镜像: 代码语言:javascript 复制 #-t 是给镜像取名。 # 最后有一个点 “.”,表示使用当前路径下的 dockerfile 文件,也可以指定使用其它路径的。