Vue Nginx Docker 项目部署

Vue Nginx Docker项目部署

1.打包Vue项目

npm run build //执行命令生成dist目录

把生成的dist目录放到服务器上，譬如 /Projectj,下文就以这个目录来讲故事

2.配置Nginx

在dist目录同级目录下，也就是/Project目录下创建nginx.conf文件。
以下是nginx.conf文件内容：

user  root;
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;

    server {
        listen       8077;
        server_name  http://192.168.1.110;

        #charset koi8-r;

#        access_log  logs/host.access_accs.log;

#        location / {
#            root   html;
#            index  index.html index.htm;
#        }

        location / {
            root   /usr/share/nginx/html/dist;
            try_files $uri $uri/ /index.html; #解决页面刷新404问题
            index  index.html index.htm;
        }

        location /api_accs/ {
            proxy_pass  http://192.168.1.110:8101/;
        }

#        location /haier/{
#		# 后端的真实接口
#          proxy_pass https://haiyunyutest-jm.haierbiomedical.com/;
#	   }
        #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;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

3.配置Docker

在dist目录同级目录下，也就是/Project目录下创建dockerfile文件。
以下是dockerfile文件内容：

FROM nginx

#RUN rm /etc/nginx/conf.d/default.conf
#
#ADD default.conf /etc/nginx/conf.d/
#
#COPY dist/ /root/Download/songmingyu_Docker_test/nginx/

RUN rm -f /etc/nginx/nginx.conf \
    && rm -f /etc/nginx/conf.d/default.conf
COPY ./nginx.conf /etc/nginx/nginx.conf

RUN mkdir /usr/share/nginx/html/dist 
COPY dist /usr/share/nginx/html/dist

ENTRYPOINT ["nginx", "-g", "daemon off;"]

3.1创建docker image 镜像

docker build -t accsv4-image .

上面的命令是创建一个镜像，accsv4-image 是镜像的名称； 点号 “.” 表示使用当前目录中的dockerfile规则来创建。
生成image镜像后，查看生成的镜像

docker image ls

3.2创建并运行docker容器

docker run --name accsv4-container -p 8077:8077 -d accsv4-image

accsv4-container是容器名称
-p之后的端口号，服务器外部访问的端口 ：容器内部端口
accsv4-image是镜像名称
-d 后台运行容器并返回容器id