docker打包vue项目

1.idea安装docker插件

 

2.配置docker

File–>Settings–>Build,Execution,Deployment–>Docker–>进行如下配置：

 

3.vue项目进行打包

在构建docker镜像前需要先将vue项目进行打包.

导入的vue项目若没有安装所依赖的包,先执行包安装命令:npm  install

安装好后安装打包工具:

安装最新版本webpack，输入命令：npm install --save-dev webpack

webpack 4+ 版本，你还需要安装 CLI ，输入命令：npm install webpack webpack-cli --save-dev

 

打包命令: npm run build

打包后会生成dist文件夹,里面就是打包后的内容.

 

4.项目中添加Dockerfile文件

注意:只能在项目根路径下添加.

 

FROM nginx:alpine

#创建文件夹
RUN mkdir /app

COPY ./dist /app

COPY nginx.conf /etc/nginx/nginx.conf

 

 

5.项目中添加nginx.conf文件

 

user  nginx;

worker_processes  1;

error_log  /var/log/nginx/error.log warn;

pid        /var/run/nginx.pid;

events {

  worker_connections  1024;

}

http {

  include       /etc/nginx/mime.types;

  default_type  application/octet-stream;

  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '

                    '$status $body_bytes_sent "$http_referer" '

                    '"$http_user_agent" "$http_x_forwarded_for"';

  access_log  /var/log/nginx/access.log  main;

  sendfile        on;

  keepalive_timeout  65;

  server {

    listen       3322;

    server_name  localhost;

    location / {

      root   /app;

      index  index.html;

      try_files $uri $uri/ /index.html;

    }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {

      root   /usr/share/nginx/html;

    }

  }

}

 

注意:端口号根据实际情况进行更改.

 

6.生成镜像

 

注意:这里的Run built image不打勾.这样只打包镜像给服务器.不创建容器.

 

如上表示构建镜像成功,已经将镜像推送到指定的仓库中.

 

7.运行容器

rancher进行基本的容器创建即可.

 

 

附件

docker打包vue项目.docx