1. 下载nginx镜像,默认拉取官方最新镜像
docker pull nginx
2. 查看下载好的镜像:
docker images nginx
3. 创建nginx容器
docker run --name nginx -p 4006:80 -d nginx
–name :指的是创建容器的名字
-d : 指的是对应镜像名
-p 指定主机与容器内部的端口号映射关系,格式 -p [宿主机端口号]:[容器内部端口],此处我用4006端口,映射容器的80端口
4. 查看运行成功的nginx容器
docker ps
5. 运行成功后,在浏览器访问nginx,会看到nginx欢迎页,访问地址为主机IP+端口
例如:198.127.22.11::4006
ps:如果是云服务器(云服务器公有 IPv4 地址),请记得开放对应的外网端口
Nginx容器搭建完成,至此开始修改配置文件
6. 创建两个文件夹,用来存储nginx的配置文件,后续直接在这里修改即可
sudo mkdir -p /date/data/nginx/conf/conf.d
sudo mkdir -p /date/data/nginx/html
7. 把nginx下的配置文件copy到我们刚刚创建的两个文件夹下,对应放置
sudo docker cp nginx:/etc/nginx/nginx.conf /date/data/nginx/conf/
sudo docker cp nginx:/etc/nginx/conf.d /date/data/nginx/conf/
sudo docker cp nginx:/usr/share/nginx/html /date/data/nginx/
copy之后就能看到刚刚拷贝的相应目录的文件
8. 停止并移除我们刚启动的nginx容器,命令:
停止容器:docker stop dbc
移除容器:docker rm dbc
9. 创建一个新的Nginx容器做目录挂载,挂载的目录就是我们刚刚创建的文件目录
docker run -p 4006:80 -p 4016:90 --name nginx \
-v /date/data/nginx/conf/conf.d:/etc/nginx/conf.d \
-v /date/data/nginx/html:/usr/share/nginx/html \
-d nginx
命令行解析:
–name nginx 启动容器的名字
-d 后台运行
-p 4006:80 将容器的4006端口映射到主机的80端口
-v /date/data/nginx/conf/conf.d:/etc/nginx/conf.d \ 挂载nginx配置文件
-v /date/data/nginx/html:/usr/share/nginx/html \ 挂载nginx内容
nginx 指的是对应镜像名
\ shell 命令换行
10. 运行启动命令后,用docker ps查看Nginx 容器是否启动成功
如果没启动成功 ,docker ps -a 获取到容器id 查看log(docker logs 容器id)
11. 放置vue项目到Linux服务器上
vue项目打包,打包后的dist包里的所有文件上传后,放到刚刚创建的nginx下面的html目录中
放好后,由于nginx容器我们刚刚已经启动ok了 ,直接访问IP:Port完全可以访问到我们的vue项目
但需要继续配置下Nginx文件反向代理
12. 修改nginx的default.conf配置文件
可以直接在sftp上传文件这块修改,也可以用命令行修改
命令行如: vim default.conf
进入文件后输入“ i ”,进入编辑
配置好文件后输入按“ Esc ” 退出键退出,然后:wq进行保存即可
server {
listen 80;
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html/dev; # 这里是vue项目文件位置
index index.html index.htm;
try_files $uri $uri/ /index.html; # 一定要配置
client_max_body_size 1024m; # 上传的文件大小限制,vue通过nginx上传超过1m的文件可能会被限制,有问题的可以加上此配置
}
#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 /usr/share/nginx/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;
#}
}
13. 以上配置文件修改完成后重启我们刚刚运行的nginx容器
docker restart 341d4f58ee7b(容器id)
找不到容器id的情况下先 docker ps查一下
14. 此时直接访问vue项目:
请求地址为:服务器IP+端口号
至此,Linux用docker安装nginx容器,到用nginx部署vue前端项目并访问,大功告成~