docker 部署Vue项目
简介
前置条件如下:
- Vue build后的静态文件
- Dockerfile文件编写
- Nginx下 conf文件配置
一、Vue build后的静态文件
示例:Vue项目打包就不赘述,下面展示下我这边vue项目打包后的文件:
打包后的文件放在自己定义的文件夹下,后续添加Dockerfile文件和conf文件,注意Dockerfile文件名必须大写,否则执行命令找不到文件,conf文件名可自己定义。
二、Dockerfile文件编写
配置文件内容如下(示例):
#标准的nginx镜像,我们需要基于标准的nginx镜像制作自己的镜像
FROM nginx
#设置生成镜像的Author
MAINTAINER sugar
#拷贝当前目录的文件到指定文件夹下,改文件夹为镜像中的文件夹
COPY . /usr/share/nginx/html/
#拷贝.conf文件到镜像下,替换掉原有的nginx.conf
COPY sugar.conf /etc/nginx/nginx.conf
#输出完成
RUN echo 'build img ok!'
三、Nginx下 conf文件配置
配置文件内容如下(示例):
worker_processes auto;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
client_max_body_size 20m;
###### blogapp begin #######
server {
listen 80;
server_name localhost;
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
location / {
root /usr/share/nginx/html; #配置Vue项目根路径,与
index index.html index.html; #配置首页
try_files $uri $uri/ /index.html; #防止刷新报404
}
location /EappPM-SV/ {
proxy_pass http://172.17.0.3:8080;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host:$server_port;
client_max_body_size 200m;
}
#error_page 404 /404.html;
#location = /40x.html {
#}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
###### blogapp end #######
}
注意nginx监听的是虚拟机的端口号,代理到对应服务的虚拟ip和端口号
部署
1、进入静态文件目录
2、 构建镜像
docker build -t eapppm-sv .
#-t 为容器重新分配一个伪输入终端,通常与 -i 同时使用;
#sugar 为镜像名称
#. 该点为当前目录
3、启动容器
docker run --name EappPM-SV-it -p 8085:80 eapppm-sv
#--name EappPM-SV--name为配置容器名称,空格后跟容器名称
#-it 容器的 Shell 映射到当前的 Shell,然后你在本机窗口输入的命令,就会传入容器。
#-p 为配置容器端口映射,容器中的80端口映射到本机的9002端口(默认容器内端口为80)
#eapppm-sv 镜像名称
#**在执行当前命令时,会进行容器日志打印,使用ctrl+c可跳出,同时容器会终止,需重新启动容器,否则,如果不需要查看日志,可以使用-d参数**
操作完成,vue项目即可访问