打包生成dist文件夹
npm run build
如果将该dist目录整个传到服务器上,部署成静态资源站点就能直接访问到该项目。
assetsPublicPath: '/' 记得改为assetsPublicPath: './' ---要改2个地方
nginx 是一个高性能的HTTP和反向代理服务器,此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像。
网上看教程,很简单
查看 镜像
[root@iZwz9104i5lanrcs2b9lx0Z appWeb]# docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
blog4 latest 735aa2373bbc 51 minutes ago 160MB
nginx latest 605c77e624dd 3 months ago 141MB
redis latest 7614ae9453d1 3 months ago 113MB
daocloud.io/library/nginx latest 298ec0e28760 13 months ago 133MB
mkdir appWeb #自己创建目录
将打包好的dist放在该目录下
并创建两个文件
touch Dockerfile
touch nginx.conf
vim nginx.conf
worker_processes auto;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream; #防止出现post403错误
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
client_max_body_size 20m;
server {
listen 80;
server_name localhost;
location ^~ /api/ {
proxy_pass http://xxx.xxx.xxx.xxx:7777/;//云服务器ip
proxy_set_header Host $http_host;
}
location / {
root /usr/share/nginx/html;
index index.html index.hmt;
#这里以下是要添加的
proxy_set_header host $host;
proxy_set_header X-forwarded-for $proxy_add_x_forwarded_for;
proxy_set_header X-real-ip $remote_addr;
#在TOMCAT配置CORS不太容易 所以在NGINX进行配置,这样就不需要在TOMCAT进行配置
#参加跨域支持 Allow-Origin用*有时候不行
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
add_header Access-Control-Allow-Credentials 'true';
add_header Access-Control-Allow-Headers 'X-Requested-With,Accept, Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET, POST, DELETE, PUT, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Accept, Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
vim Dockerfile
FROM nginx
# 定义作者
MAINTAINER chen
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html/
#拷贝.conf文件到镜像下,替换掉原有的nginx.conf
COPY nginx.conf /etc/nginx/nginx.conf
#输出完成
RUN echo 'echo init ok!!'
使用 命令构建镜像 -t blog--自定义镜像名
记得后面空格加. 表示运行当前目录下的Dockerfile文件
docker build -t blog .
运行镜像
-name blogaa 表示容器名
-p 81:80 端口映射
-d blog 后台运行blog镜像
docker run --name blogaa -p 81:80 -d blog
即可访问