docker 启动Nginx镜像部署Vue项目

前一篇文章(部署vue项目到阿里云服务器_夜跑者的博客-CSDN博客)阐述了直接启动Nginx进程来部署vue项目，这篇文章阐述采用docker 启动Nginx镜像来部署vue项目。

1. docker 启动Nginx镜像

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

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

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

 

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

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

    这一步可以参考上一篇文章，不再详细描述。

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

    1）创建Nginx配置文件

         nginx.conf文件内容如下：

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn; 
pid        /var/run/nginx.pid; # nginx运行表示
events {
    worker_connections  1024; # 数值越大，Nginx并发能力越强
}
http {
    include       /etc/nginx/mime.types; # 引入一个外部文件，定义文件格式文件名.类型
    default_type  application/octet-stream; # 默认类型
 
 
    sendfile        on;
    #tcp_nopush     on;
 
    keepalive_timeout  65;
 
    #gzip  on;
    
    include /etc/nginx/conf.d/*.conf; # 【引入conf.d下以.conf结尾的文件】
}

   default.conf文件内容如下：

 server {
        listen      80;
        server_name  localhost;
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
        #root   /root/html;
 
        location / {
            root   /usr/share/nginx/html;
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }
 
        location @router {
           rewrite ^.*$ /index.html last;
        }
 
        #error_page  404              /404.html;
 
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
  }

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

         DockerFile文件内容如下：

FROM nginx
MAINTAINER liubangbo
ADD nginx.conf /etc/nginx/nginx.conf
RUN rm -rf /etc/nginx/conf.d/default.conf
COPY default.conf /etc/nginx/conf.d/
COPY dist/  /usr/share/nginx/html/

   3)  构建Nginx镜像，并启动

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

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

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