前一篇文章(部署vue项目到阿里云服务器_夜跑者的博客-CSDN博客)阐述了直接启动Nginx进程来部署vue项目,这篇文章阐述采用docker 启动Nginx镜像来部署vue项目。
1. docker 启动Nginx镜像
docker pull nginx #拉取Nginx镜像
docker images # 查看所有镜像
可以看到Nginx镜像已经成功拉取
docker run --name my-nginx -p 889:80 -d nginx:latest #启动Nginx镜像
docker ps #查看启动的镜像
可以看到Nginx镜像已成功启动,在浏览器地址栏输入IP+port 出现Nginx欢迎页。
2. vue项目打包,并把dist拷贝到阿里云服务器/home/myNgin目录下
这一步可以参考上一篇文章,不再详细描述。
3. 制作docker 本地镜像,并启动
1)创建Nginx配置文件
nginx.conf文件内容如下:
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid; # nginx运行表示
events {
worker_connections 1024; # 数值越大,Nginx并发能力越强
}
http {
include /etc/nginx/mime.types; # 引入一个外部文件,定义文件格式文件名.类型
default_type application/octet-stream; # 默认类型
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf; # 【引入conf.d下以.conf结尾的文件】
}
default.conf文件内容如下:
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
#root /root/html;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ @router;
index index.html index.htm;
}
location @router {
rewrite ^.*$ /index.html last;
}
#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;
}
}
2)创建DockerFile Nginx构建镜像文件
DockerFile文件内容如下:
FROM nginx
MAINTAINER liubangbo
ADD nginx.conf /etc/nginx/nginx.conf
RUN rm -rf /etc/nginx/conf.d/default.conf
COPY default.conf /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/
3) 构建Nginx镜像,并启动
记得把之前启动的镜像(Nginx欢迎页那个镜像)删除掉
docker build -t my-nginx . #构建镜像
docker run -d --name my-nginx-test -p 890:80 my-nginx #启动镜像
docker ps #查看镜像
再次在浏览器输入IP+端口号会出现vue部署的项目,记得清除一下缓存。