【Docker】docker+Nginx部署前端项目-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Docker】docker+Nginx部署前端项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

【Docker】docker+Nginx部署前端项目

创建配置文件

我们需要在根目录下创建Dockerfile文件和default.conf文件。

其中default.conf文件的名称是什么无所谓，只要在配置文件中注意使用相同名称即可。

【Docker】docker+Nginx部署前端项目

Dokcerfile文件具体内容如下：

FROM nginx:latest

# 将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下
COPY dist/ /usr/share/nginx/html/
COPY default.conf /etc/nginx/conf.d/default.conf

FROM nginx:latest: 命令的意思该镜像是基于 nginx:latest 镜像而构建的。
COPY dist/ /usr/share/nginx/html/ :命令的意思是将项目根目录下 dist 文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下。

这里镜像中的目录我们不要动，但需要保证我们项目的打包目录是dist/，或者自定义到你打包的目录下。
COPY default.conf /etc/nginx/conf.d/default.conf 命令的意思是将 Nginx 目录下的 default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。

这里镜像中的目录我们不要动，但需要保证我们编写的文件名也为default.conf，或者与你自己写的文件名对应

default.conf

下面的配置直接照抄就好，特别注意，监听的端口号并不需要动，这里的80端口指的是容器的端口，最后我们会将容器的端口映射到我们宿主服务器的端口，比如映射到8888端口。

8888:80

然后注意修改为自己的服务器IP地址

完整配置：

upstream my_server{
  server 121.41.4.33:3000; # 后端server 地址
  keepalive 2000;
}

server {
    listen       80; #这里的端口号不要动，80端口指的是容器的端口，最后我们会将容器的端口映射到我们宿主服务器的端口，比如映射到8888端口
    server_name  111.20.xxx.xxx; # 修改为docker服务宿主机的ip/域名
    
    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
     #  这里就是和vue本地代理的意思一样，已api开头的路径都代理到本机的3000端口
    location /api/ {
        proxy_pass http://my_server/api;
        proxy_set_header Host $host:$server_port;
        rewrite ^/api/(.*) /$1 break;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
    
}

项目打包与部署

将打包项目，把dist文件夹和刚刚创建的Dockerfile,default.conf放到同一目录，并上传到服务器。

【Docker】docker+Nginx部署前端项目

比如，我的代码存放位置是/home/test目录。

然后需要构建镜像

docker build -t test .

docker build -t我们并不需要动，

后面的test是我们构建的镜像的名称，.代表需要进行构建的代码的存放位置，这里是.是因为我当期所在目录就是/home/test，并且我的项目的三个文件就位于/home/test目录下。

如果我们此时位于其他目录，当前目录下没有要进行镜像打包的文件，那就需要更改路径。

比如：

dokcer build -t test /home/test

【Docker】docker+Nginx部署前端项目

然后使用dokcer images可以查看我们已经存在的镜像

【Docker】docker+Nginx部署前端项目

镜像构建好后，我们就可以拿这个镜像启动一个容器

docker run -d -p 8888:80 --name test-image test

-d 后台方式运行
-p 8888:80 端口映射，将宿主的8888端口映射到容器的80端口
–name 容器名镜像名

然后我们可以使用docker ps查看当前正在运行的容器

并且使用IP地址和端口号访问当前的项目

注意

上面我们进行了端口映射，那就需要在服务器中开启要使用的端口，

我们可以在云服务器中的安全组进行设置。

或者使用命令设置

查看已开放端口命令：firewall-cmd --list-all

查看防火墙状态：active (running) 即是开启状态

systemctl status firewalld
查看已开发端口命令：firewall-cmd --list-all
新增防火墙开放端口：

firewall-cmd --zone=public --add-port=3306/tcp --permanent
开放端口后需要重新加载防火墙：

firewall-cmd --reload

一些相关指令

如果我们不再需要这个容器和镜像，

首先需要先停止这个容器，然后在移出容器和镜像。

首先拿docker ps找到指定容器的ID，

使用docker stop [ID] 停止容器

docker rm [ID] 移除容器

然后拿docker images查看已存在的镜像ID，

使用docker rmi [ID] 移除镜像

可能我们的docker没有设置开机启动：

systemctl start docker # 启动docker
systemctl status docker # 查看docker的运行状态

一个相关报错：关于：Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?

后续，我们将使用docker和github actions实现自动化部署。文章来源地址https://www.toymoban.com/news/detail-401172.html

到了这里，关于【Docker】docker+Nginx部署前端项目的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

【Docker】docker+Nginx部署前端项目