Docker + Nginx 部署Vue项目

1.vue项目打包

打包生成dist文件夹

npm run build

　如果将该dist目录整个传到服务器上，部署成静态资源站点就能直接访问到该项目。

assetsPublicPath: '/' 记得改为assetsPublicPath: './' ---要改2个地方

2.安装docker,并使用nginx镜像

nginx 是一个高性能的HTTP和反向代理服务器，此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像。

网上看教程,很简单

查看 镜像

[root@iZwz9104i5lanrcs2b9lx0Z appWeb]# docker images
REPOSITORY                  TAG       IMAGE ID       CREATED          SIZE
blog4                       latest    735aa2373bbc   51 minutes ago   160MB
nginx                       latest    605c77e624dd   3 months ago     141MB
redis                       latest    7614ae9453d1   3 months ago     113MB
daocloud.io/library/nginx   latest    298ec0e28760   13 months ago    133MB

mkdir appWeb #自己创建目录 

将打包好的dist放在该目录下

并创建两个文件
touch Dockerfile
touch nginx.conf

vim nginx.conf

worker_processes auto;
 
 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream; #防止出现post403错误
    
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
 
    #gzip  on;
 
    client_max_body_size   20m;
  
server {
    listen       80;
    server_name  localhost;

location ^~ /api/ {
         
             proxy_pass http://xxx.xxx.xxx.xxx:7777/;//云服务器ip
             proxy_set_header Host $http_host;
       
            


}

    
location / {
        root   /usr/share/nginx/html;
        index  index.html index.hmt;

	#这里以下是要添加的
            proxy_set_header host $host;
            proxy_set_header X-forwarded-for $proxy_add_x_forwarded_for;
            proxy_set_header X-real-ip $remote_addr;
            #在TOMCAT配置CORS不太容易 所以在NGINX进行配置,这样就不需要在TOMCAT进行配置
            #参加跨域支持 Allow-Origin用*有时候不行
            add_header Access-Control-Allow-Origin  $http_origin;
            add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
            add_header Access-Control-Allow-Credentials 'true';
            add_header Access-Control-Allow-Headers 'X-Requested-With,Accept, Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            if ($request_method = 'OPTIONS') {
               add_header 'Access-Control-Max-Age' 1728000;
               add_header 'Access-Control-Allow-Credentials' 'true';
               add_header 'Access-Control-Allow-Methods' 'GET, POST, DELETE, PUT, OPTIONS';
               add_header 'Access-Control-Allow-Headers' 'Accept, Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
               add_header 'Content-Type' 'text/plain charset=UTF-8';
               add_header 'Content-Length' 0;
               return 204;
           }
   
}    
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
 }
 
}

vim Dockerfile

FROM nginx
# 定义作者
MAINTAINER chen
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
#拷贝.conf文件到镜像下，替换掉原有的nginx.conf
COPY nginx.conf /etc/nginx/nginx.conf
#输出完成
RUN echo 'echo init ok!!'

使用 命令构建镜像  -t blog--自定义镜像名

记得后面空格加. 表示运行当前目录下的Dockerfile文件

docker build -t blog .

运行镜像

-name blogaa 表示容器名

-p 81:80 端口映射

-d blog 后台运行blog镜像

docker run --name blogaa -p 81:80 -d blog

即可访问