亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

使用vue,webpack,和docker獨立運行前端程序

標簽:
Vue.js Docker

使用docker构建前端代码主要就是写Dockerfile的过程,这个是一个通用的模板,直接使用node来构建docker镜像。

1.Dockerfile内容如下:

FROM node:9.11.2-slim        //使用精简版的node作为父镜像,该镜像的父镜像是一个debian也是一个linux发行版
RUN apt-get update  && apt-get install -y nginx  // 安装nginx web服务器为前端提供运行环境
RUN mkdir /app  // 创建一个临时工作目录
WORKDIR /app  // 切换到当前工作目录
COPY . /app/   // copy当前的所有文件到临时工作目录
ENV PORT 80 // 使用80端口号访问该镜像提供的服务
RUN mkdir /var/www/html/dist \   // 在nginx web空间创建一个存放编译好好后的前端代码的目录dist
&& npm install \  // 使用npm安装前端依赖包
&& npm run build \ // 编译前端代码
&& cp -r dist/* /var/www/html/dist \  // 将编译好的文件copy到nginx对应的web目录
&& cp -r index.html /var/www/html \ // 这一步根据不同的项目是否需要把index.html文件copy到该目录
&& rm -rf /app  // 移出临时目录
RUN echo "Asia/shanghai" > /etc/timezone // 设置程序运行的时区
CMD ["nginx","-g","daemon off;"]  // 当使用该镜像创建的容器启动的时候运行的命令,直接启动nginx 服务。

完整的Dockerfile文档
FROM node:9.11.2-slim
RUN apt-get update  && apt-get install -y nginx
RUN mkdir /app
WORKDIR /app
COPY . /app/
ENV PORT 80RUN mkdir /var/www/html/dist \
    && npm install \
    && npm run build \
    && cp -r dist/* /var/www/html/dist \
    && cp -r index.html /var/www/html \
    && rm -rf /app
RUN echo "Asia/shanghai" > /etc/timezoneCMD ["nginx","-g","daemon off;"]

2.使用第一步的Dockerfile构建docker镜像

docker  -t  XXXX .  // XXXX表示编译出来镜像的名字 这个“.”代表Dockerfile在当前目录下,如果没有在需指定Dockerfile的位置

$ docker  -t  XXXX .

3.经过上面的步骤基本上就可以完成docker镜像的制作

$ docker images  // 列出本机上所有的docker镜像

4.使用下面命令可以创建容器

$ docker run -d -p 8080:80  imagename // -d 表示使用后台进程方式运行容器 -p 讲容器端口80映射到宿主机8080端口

         

             


作者:刘2傻
链接:https://www.jianshu.com/p/93ddec5b100a

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 1
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消