2.5 Docker部署nginx和前端项目

1、拉取镜像

docker pull nginx

2、启动nginx容器

docker run --restart=always --name=nginx -p 8000:80 -p 443:443 -d nginx

-d 后台运行

–name 容器命名

-p 宿主机端口:容器内部端口

3、访问测试

访问地址：http://ip+port

如：http://47.xxx.15.23:8000

云服务器记得开放端口

4、挂载准备

4.1、宿主机创建挂载目录

cd /
mkdir -p /docker/nginx

4.2、复制配置文件到宿主机

docker cp nginx:/etc/nginx /docker/nginx/conf
docker cp nginx:/usr/share/nginx/html /docker/nginx/html
docker cp nginx:/var/log/nginx /docker/nginx/logs

4.3、创建前端工程挂载目录

该目录的好处在于，上传新的前端项目后，不用重新启动nginx，只需要修改nginx.conf配置

mkdir /root/front_server

4.4、删除之前建立的nginx

docker rm -f nginx

4.5、挂载启动nginx容器

docker run --restart=always --name=nginx -p 8000:80 -p 443:443 -v /docker/nginx/conf:/etc/nginx -v /docker/nginx/html:/usr/share/nginx/html -v /docker/nginx/logs:/var/log/nginx -v /root/front_server:/root/front_server --privileged=true -d nginx

==注意：== 若ports未显示端口号，则表示容器部署失败，可查看端口号是否被占用或目录路径是否正确或查看Docker容器日志

5. 部署前端项目

5.1 对前端项目进行打包：

npm run build

5.2 把dist包传入/root/front_server

5.3 拷贝前端文件：

cp /docker/nginx/html/index.html /root/front_server/

5.3 创建并修改default.conf文件：

vim  /docker/nginx/conf/conf.d/default.conf

修改的default.conf内容如下：

    location / {
        alias /root/front_server;
        index index.html index.htm;
    }

该配置文件定义了首页的指向为 /usr/share/nginx/html, 把构建出来的index.html文件和相关的静态资源放到/usr/share/nginx/html目录下。

参考：https://blog.csdn.net/zhuocailing3390/article/details/121778137

方法2

5.4 在项目文件夹下编写Dockerfile文件

vim /root/front_server/Dockerfile

Dockerfile内容如下：

FROM nginx
MAINTAINER hgh
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/

FROM nginx：该镜像是基于nginx:latest镜像构建的

MAINTAINER hgh：添加说明

RUN rm /etc/nginx/conf.d/default.conf：删除目录下的default.conf文件

ADD default.conf /etc/nginx/conf.d/：将default.conf复制到/etc/nginx/conf.d/下，用本地的default.conf配置来替换nginx镜像里的默认配置

COPY dist/ /usr/share/nginx/html/：将项目根目录下dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下

5.3 创建并修改default.conf文件：

vim  /root/front_server/default.conf

修改的nginx.conf内容如下：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/json;

    sendfile        on;

    keepalive_timeout  65;

    server {
        listen       9090;
        # 指定前端项目所在的位置
        location /front {
            root /usr/share/nginx/tcm-ui/tcm-front;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        location /api {
            rewrite /api/(.*)  /$1 break;
            proxy_pass http://tcm:8888;
        }
    }
    server {
        listen       9091;
        # 指定前端项目所在的位置
        location /back {
            root /usr/share/nginx/tcm-ui/tcm-back;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        location /api {
            rewrite /api/(.*)  /$1 break;
            proxy_pass http://tcm:8880;
        }
    }
}

注意：default.conf、dist、Dockerfile三个文件保持在同一目录

5.5 在当前目录下构建docker镜像：

docker build -t tcm-front .

-t tcm-front: 自定义镜像名

“.”(点) 基于当前目录的Dockerfile来构建镜像

5.6 查看镜像

docker images | grep tcm-front

5.7启动容器

docker run --restart=always -d -p 9090:80 --name tcm-front tcm-front

5.8 查看启动的容器

docker ps

5.9访问

ip+端口号

注意注意：一定要在服务器上开放端口号的安全组

https://b11et3un53m.feishu.cn/wiki/MWQIw4Zvhil0I5ktPHwcoqZdnec