docker安装nginx并且部署vue项目

目录

1、拉取nginx镜像

2、进入的工作目录

3、创建临时容器

4、nginx 配置文件

5、删除创建的临时容器

6、修改default.conf文件

7、创建容器

8、上传vue文件

9、重启容器

10 linux下需要外部访问，需将端口号添加到防火墙

---

1、拉取nginx镜像

docker pull nginx

2、进入的工作目录

cd /usr/local/docker/nginx

如果不存在该目录执行命令

mkdir -p /usr/local/docker/nginx

在工作目录下依次创建html conf 两个文件夹

mkdir -p html etc

3、创建临时容器

docker run --name temp -p 80:80 -v /usr/local/docker/nginx/html:/usr/share/nginx/html  -d nginx

参数详解：
-p 80:80：将容器的 80端口映射到主机的 80端口,第一个是主机端口，第二个是容器端口。
--name 容器名字 可以随便自定义哦！
-v  /usr/local/docker/nginx/html:/usr/share/nginx/html：将主机当前目录下的 html目录挂载到容器的 /usr/share/nginx/html。
-d 后台启动
nginx  启动的镜像的名字

4、nginx 配置文件

将nginx容器中的配置文件所在的目录下的文件内容拷贝到宿主机中，让这两个目录的原始内容先保持一致

 docker cp 容器id:/etc/nginx /usr/local/docker/nginx/etc

将拷贝出来的文件搬家一下

cd /usr/local/docker/nginx/etc

mv nginx/* /usr/local/docker/nginx/etc

我们能在主机的etc目录下看到拷贝的文件，在conf.d文件夹中查看到default.conf文件

5、删除创建的临时容器

先停止容器

docker stop 容器名称

删除容器

docker rm 容器名称

6、修改default.conf文件

cd /usr/local/docker/nginx/etc/conf.d

vim default.conf

按insert键，进入编辑模式，根据需要自己修改调整

server {
    listen       80; #设置端口
    listen  [::]:80; #设置端口
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
	    try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }
   location /prod-api/{
         proxy_set_header Host $http_host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header REMOTE-HOST $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_pass http://localhost:8080/; #设置监控后端启动的端口
     }

    #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;
    #}
}

修改完，按esc键 ，再按: ,最后输入wq，保存退出

7、创建容器

docker run --restart=always --name nginx -p 80:80  -v /usr/local/docker/nginx/html:/usr/share/nginx/html -v /usr/local/docker/nginx/etc:/etc/nginx -d  nginx

参数详解：
-p 80:80：将容器的 80端口映射到主机的 80端口,第一个是主机端口，第二个是容器端口。

--restart=always 自动启动容器

--name 容器名字 可以随便自定义哦！
-v  /usr/local/docker/nginx/html:/usr/share/nginx/html：将主机当前目录下的 html目录挂载到容器的 /usr/share/nginx/html。

-v  /usr/local/docker/nginx/etc:/etc/nginx：将主机当前目录下的 etc目录挂载到容器的 /etc/nginx。
-d 后台启动
nginx  启动的镜像的名字

8、上传vue文件

将生成文件拷贝到 /usr/local/docker/nginx/html

9、重启容器

docker restart  nginx

10 linux下需要外部访问，需将端口号添加到防火墙

firewall-cmd --zone=public --add-port=端口/tcp --permanent

service firewalld  restart