使用docker+nginx部署vue项目

第一次用docker部署前端项目，做个笔记

1. 打包vue项目获得dist文件夹
2. 写Dockerfile，内容如下

   FROM hub.c.163.com/library/nginx    #基于nginx
   
   MAINTAINER sorel     #维护者信息
    
   COPY dist/  /usr/share/nginx/html/    #nginx容器生成的一个虚拟路径，项目运行在这里
   
   COPY nginx.conf /etc/nginx/nginx.conf    #拷贝nginx设置文件

    

3. 编写nginx.conf，内容如下：

    
   #user  nobody;
   worker_processes  1;
    
   #error_log  logs/error.log;
   #error_log  logs/error.log  notice;
   #error_log  logs/error.log  info;
    
   #pid        logs/nginx.pid;
    
    
   events {
       worker_connections  1024;
   }
    
    
   http {
       include       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  logs/access.log  main;
    
       sendfile        on;
       #tcp_nopush     on;
    
       #keepalive_timeout  0;
       keepalive_timeout  65;
    
       #gzip  on;
    
       client_max_body_size   20m;
       server {
           listen       80;
           server_name  www.aaaaaa.com;
    
           #charset koi8-r;
    
           #access_log  logs/host.access.log  main;
   	 location / {
   		root   /usr/share/nginx/html;
   		index  index.html index.htm;
   		try_files $uri $uri/ /index.html;
           }
           #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;
           }
    
           # proxy the PHP scripts to Apache listening on 127.0.0.1:80
           #
           #location ~ \.php$ {
           #    proxy_pass   http://127.0.0.1;
           #}
    
           # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
           #
           #location ~ \.php$ {
           #    root           html;
           #    fastcgi_pass   127.0.0.1:9000;
           #    fastcgi_index  index.php;
           #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
           #    include        fastcgi_params;
           #}
    
           # deny access to .htaccess files, if Apache's document root
           # concurs with nginx's one
           #
           #location ~ /\.ht {
           #    deny  all;
           #}
       }
    
    
       # another virtual host using mix of IP-, name-, and port-based configuration
       #
       #server {
       #    listen       8000;
       #    listen       somename:8080;
       #    server_name  somename  alias  another.alias;
    
       #    location / {
       #        root   html;
       #        index  index.html index.htm;
       #    }
       #}
    
    
   }

    

4. 在服务器上新建一个文件夹docker，上传dist，Dockerfile，nginx.conf到docker文件夹下

5. cd到docker文件夹下执行命令：

   docker build -t aquaman:v1.0.0 . 
   # -t 是给镜像添加tag
   # 注意最后有一个点 “.”，表示使用当前路径下的 dockerfile 文件，也可以指定使用其它路径的。