docker 启动Nginx镜像部署Vue项目

1. docker 启动Nginx镜像

1.  
   docker pull nginx #拉取Nginx镜像
2.  
   docker images # 查看所有镜像

 可以看到Nginx镜像已经成功拉取

1.  
   docker run --name my-nginx -p 889:80 -d nginx:latest #启动Nginx镜像
2.  
   docker ps #查看启动的镜像

 可以看到Nginx镜像已成功启动，在浏览器地址栏输入IP port 出现Nginx欢迎页。

2. vue项目打包，并把dist拷贝到阿里云服务器/home/myNgin目录下

3. 制作docker 本地镜像，并启动

    1）创建Nginx配置文件

         nginx.conf文件内容如下：

1.  
   user nginx;
2.  
   worker_processes 1;
3.  
   error_log /var/log/nginx/error.log warn;
4.  
   pid /var/run/nginx.pid; # nginx运行表示
5.  
   events {
6.  
   worker_connections 1024; # 数值越大，Nginx并发能力越强
7.  
   }
8.  
   http {
9.  
   include /etc/nginx/mime.types; # 引入一个外部文件，定义文件格式文件名.类型
10.  
    default_type application/octet-stream; # 默认类型
11.  
     
12.  
     
13.  
    sendfile on;
14.  
    #tcp_nopush on;
15.  
     
16.  
    keepalive_timeout 65;
17.  
     
18.  
    #gzip on;
19.  
     
20.  
    include /etc/nginx/conf.d/*.conf; # 【引入conf.d下以.conf结尾的文件】
21.  
    }

   default.conf文件内容如下：

1.  
   server {
2.  
   listen 80;
3.  
   server_name localhost;
4.  
   #charset koi8-r;
5.  
    
6.  
   #access_log logs/host.access.log main;
7.  
   #root /root/html;
8.  
    
9.  
   location / {
10.  
    root /usr/share/nginx/html;
11.  
    try_files $uri $uri/ @router;
12.  
    index index.html index.htm;
13.  
    }
14.  
     
15.  
    location @router {
16.  
    rewrite ^.*$ /index.html last;
17.  
    }
18.  
     
19.  
    #error_page 404 /404.html;
20.  
     
21.  
    # redirect server error pages to the static page /50x.html
22.  
    #
23.  
    error_page 500 502 503 504 /50x.html;
24.  
    location = /50x.html {
25.  
    root html;
26.  
    }
27.  
    }

    2）创建DockerFile Nginx构建镜像文件

         DockerFile文件内容如下：

1.  
   FROM nginx
2.  
   MAINTAINER liubangbo
3.  
   ADD nginx.conf /etc/nginx/nginx.conf
4.  
   RUN rm -rf /etc/nginx/conf.d/default.conf
5.  
   COPY default.conf /etc/nginx/conf.d/
6.  
   COPY dist/ /usr/share/nginx/html/

   3)  构建Nginx镜像，并启动

记得把之前启动的镜像(Nginx欢迎页那个镜像)删除掉 

1.  
   docker build -t my-nginx . #构建镜像
2.  
   docker run -d --name my-nginx-test -p 890:80 my-nginx #启动镜像
3.  
   docker ps #查看镜像

 再次在浏览器输入IP 端口号会出现vue部署的项目，记得清除一下缓存。

这篇好文章是转载于：学新通技术网