linux用docker安装nginx & nginx手动部署vue前端项目

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前端项目并访问，大功告成~