Docker nginx部署vue 项目

NGINX docker vue 项目

创建运行 nginx 并挂载目录
    
docker run \
--name my_nginx \
-d -p 80:80   \
-v $PWD/dist:/usr/share/nginx/html \
-v /data/nginx/conf/nginx.conf:/etc/nginx/nginx.conf  \
-v /data/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /data/nginx/log:/var/log/nginx  \
nginx
 
    
    
docker run \
--name my_nginx \
-d -p 80:80   \
-v /data/nginx/html:/usr/share/nginx/html \
-v /data/nginx/conf/nginx.conf:/etc/nginx/nginx.conf  \
-v /data/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /data/nginx/log:/var/log/nginx  \
nginx
    
    
说明 $PWD 当前文件所在路径 同linux pwd命令

vue 项目打包【build】之后，将生成的dist 文件夹 ，直接放到nginx 下

$PWD/dist:/usr/share/nginx/html  将dist本地目录 挂载到容器 /usr/share/nginx/html 目录
dist/index.html  <----  等同于----- >  html/index.html

    vue项目 部署到nginx 下，因vue 项目 VueRouter 的 mode 是 'history'模式,  导致浏览器中， 前进， 后退 刷新时 。出现404页面错误。

解决 nginx 404 错误

在/data/nginx/conf/conf.d/default.conf 中

server {
    listen       80;
    server_name  localhost; #修改域名

    location / {
        try_files $uri $uri/ /index.html;#注意  必须写在location 下第一行，负责无效
        root /usr/share/nginx/html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

nginx.conf

user root;
worker_processes auto;
pid /run/nginx.pid;

events {
        worker_connections 768;
        # multi_accept on;
}

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # SSL Settings
        ##

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;
        gzip_disable "msie6";

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

        ##
        # Virtual Host Configs
        ##

        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;

        server{
                listen 80;
                server_name your_server_name;   #你的serverName
                root /usr/share/nginx/html;
                index index.html;
        }

}