本文学习自:https://juejin.im/post/5bee5ddde51d457b8a33938c

项目环境是在ubuntu下,记得要在root目录下,不然安装vue会报错

npm install -g vue-cli
vue init webpack demo01
cd demo01
npm run dev



dockerfile文件配置详解

基础镜像node,以及安装nginx。

FROM node:8-slim

RUN apt-get update && apt-get install -y nginx

在镜像中创建目录/usr/src/app以及进入到该目录中。用来临时存放项目代码。

FROM node:8-slim
RUN apt-get update && apt-get install -y nginx

在镜像中创建目录/usr/src/app以及进入到该目录中。用来临时存放项目代码。

WORKDIR /usr/src/app

下载node依赖。

# 拷贝三个依赖相关的json文件到 "/usr/src/app" 目录下

COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]

# 下载依赖
RUN npm install

拷贝项目所有文件到 /usr/src/app 目录下。(这里选择了先下载依赖,再拷贝项目的所有文件到镜像中。)

COPY . .

运行打包命令

RUN npm run build

将nginx的日志软连接到了标准输出和标准错误。这样可以通过 docker logs 查看nginx的日志。

RUN ln -sf /dev/stdout /var/log/nginx/access.log \
&& ln -sf /dev/stderr /var/log/nginx/error.log
EXPOSE 80

移动打包后的文件到 nginx的 html目录下。并将项目源文件移除(没有用了,要的只是打包后的静态文件)。

RUN cp -r dist/* /var/www/html \
&& rm -rf /user/src/app

配置项目启动命令。-g 'daemon off;'配置参数将会使nginx前台运行,如果后台运行,docker容器会直接退出。

CMD ["nginx","-g","daemon off;"]

部署

将项目移动到部署的系统中(以linux为例),并进入到项目根目录中。

将项目打包成docker镜像。镜像名称为demo,版本号为1.0

docker build -t demo:1.0 .

-t <镜像名称>:<版本号>

创建容器并运行。这里用的是nginx-proxy进行代理。直接打开 <域名> 即可访问。

docker run -d -p 80 -e VIRTUAL_HOST=<域名> demo:1.0

注意这里的端口号哦,不然会报错


# 可以开多个容器。nginx-proxy会自动配置负载均衡
docker run -d -p 80 -e VIRTUAL_HOST=<域名> demo:1.0

跟我一起使用Vue.js + Docker 部署项目的更多相关文章

  1. 【前端】Vue.js经典开源项目汇总

    Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...

  2. Vue.js经典开源项目汇总

    Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...

  3. Vue.js经典开源项目汇总-前端参考资源

    Vue.js经典开源项目汇总 原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...

  4. 转载: 我如何使用 Django + Vue.js 快速构建项目

    原文链接: https://www.ctolib.com/topics-109796.html 正文引用如下 引言 大U的技术课堂 的新年第一课,祝大家新的一年好好学习,天天向上:) 本篇将手把手教你 ...

  5. Vue.js动画在项目使用的两个示例

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 李萌,16年毕业,Web前端开发从业者,目前就职于腾讯,喜欢node.js.vue.js等技术,热爱新技术,热 ...

  6. 【Vue】转-Vue.js经典开源项目汇总

    版权声明:本文为EnweiTech原创文章,未经博主允许不得转载. https://blog.csdn.net/English0523/article/details/88694219 Vue是什么? ...

  7. Vue.js系列之项目结构说明

    转:https://www.jb51.net/article/111658.htm 前言 在上一篇项目搭建文章中,我们已经下载安装了node环境以及vue-cli,并且已经成功构建了一个vue-cli ...

  8. 使用Vue.js初次真正项目开发-2018/07/14

    一.组件化 使用Vue.js进行开发,按照MVVM模式,围绕数据为核心,进行开发. 开发过程根据业务和功能组件化,组件化一方面让我们开发思路更加清晰,另一方面对于数据的处理和控制变得更加简单,毕竟一个 ...

  9. vue.js打包部署线上

    你完成了工程开发,需要部署到外网环境,要进行下面的步骤: 一.首先你要购买一个服务器或者有自己的服务器.我介绍给大家的一个免费的服务器:http://free.3v.do/index.html可以免费 ...

随机推荐

  1. playbackRate控制音频播放倍速

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. ajaxFileUpload.js插件支持多文件上传的方法

    前提条件:ajaxFileUpload.js插件多文件上传步骤:1.修改源码,(源码只支持单个文件的上传):复制代码 代码如下: //修改前代码------- //var oldElement = j ...

  3. Fedora 25技巧

    shell界面按F5插入-(波浪号,HOME) 同一个应用不同窗口切换alt + `

  4. 微信小程序开发显示城市天气

    本案例实现动态显示城市天气的功能,案例效果如下: 首先分析制作的思路: 1.在app.json文件的pages数组里加上main文件夹和template(模板)文件夹的路径. 2.在main.js文件 ...

  5. 什么是URI、URL、URN、URC和Data URI?

    前言 不知道大家有没有电话拨号通过'猫'上网的经历,那时测试网络是否连接,最好的方式就是打开浏览器输入: www.baidu.com 那会管这一连串字母叫' 网址 '.之后上大学(计算机专业),知道了 ...

  6. 微信小程序picker下拉绑定数据

    页面部分 <picker mode = "selector" bindchange="bindPickerChange" value="{{pr ...

  7. boost asio acceptor 构造

    boost::asio::io_service io_svc; boost::asio::ip::address_v4 lis_ip; // 默认监听本机所有IP boost::asio::ip::t ...

  8. sublime Text3安装及配置与解决安装插件失败

    1.下载sublime Text3的官网:https://www.sublimetext.com/32.安装Package Control   下载Package Contoral地址: 链接:htt ...

  9. HTTP状态码及请求头

    状态码 状态码告知从服务器端返回的请求结果 一般可分为5个大类 1XX Informational(信息性状态码) 2XX Success(成功状态码) 3XX Redirection(重定向状态码) ...

  10. Q:简单实现URL只能页面跳转,禁止直接访问

    sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据,且不同标签页的session不能共享,通过此特性来控制某个页面只能通过上级页面同标签页跳转 ...