一、将你的vue项目打包,打包成的结构以下:php
WEB-INF是为了解决在tomcat下 单路由页面报错404问题,这里能够忽略。html
二、复制你的nginx.config文件到/work下vue
config文件内容:nginx
#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; # } #} }
三、编写Dockerfile文件:web
FROM nginx:1.13.7 MAINTAINER panhf <1990081968@qq.com> ADD ./tomcat/webapps/my/. /usr/share/nginx/html COPY nginx.conf /etc/nginx/nginx.conf RUN echo 'echo init ok!!'
./tomcat/webapps/my/. 该路径是个人项目所在的路径,由于以前测试了tomcat服务器,因此就没有修改项目路径docker
/usr/share/nginx/html 该路径是nginx容器生成的一个虚拟路径,你的项目会存在这里。tomcat
四、执行命令,生成镜像:docker build -t vuejs:V1.0.0 .服务器
五、生成容器:docker run --name vue1.1 -p 80:80 -d vuejs:v1.0.0app
其中80:80 是端口映射,就不细说了。webapp
使用命令 docker ps 查看容器启动状态,若是出现这个:
没有意外的话,这时候已经ok了 你就能够访问你的项目了 。
转载请标明出处。