跳至主要內容

docker+Nginx部署前端项目

Leodocker🛥️docker🛥️约 1508 字大约 5 分钟

Docker | Docker+Nginx部署前端项目

1.前言

大家好，我是Leo哥🫣🫣🫣，这篇文章open in new window中，我们已经学习了如何通过Docker来部署我们SpringBoot项目，那么我们这篇文章教大家如何通过Docker + Nginx + Dockerfile的方式去部署我的前端项目。好了，话不多说让我们开始吧😎😎😎。

2.概述

其实部署前端项目的方式有很多种，其实也可以Docker安装Nginx的方式，把前端dist目录上传即可，这种是比较常规的一种方式。

今天我们为大家介绍另一种方式，再Dockefile去构建我们的镜像。

3.相关配置安装

首先我们先准备一个目录，我这里习惯在/opt下面创建一个software目录，然后在这个目录里面做一些安装目录的配置。

mkdir /opt/software/blog

然后进入这个文件中开始准备配置。

image-20231213190350292
image-20231213190350292

3.1 配置Dockerfile

在blog目录下面创建一个Dockerfile。

vim Dockerfile

然后里面编写如下配置。

FROM nginx:latest
 
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，或者与你自己写的文件名对应即可。

3.2 编写default.conf

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

然后 注意修改为自己的服务器IP地址或者是自己的虚拟机IP

server {
    listen       80;
    listen  [::]:80;
    server_name  192.168.74.102;
    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;
    location / {
        root    /usr/share/nginx/html; 
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    #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;
    }
}

3.3 前端dist目录

这里再把你的前端通过bulid命令打包之后的dist目录上传到当前目录下，也就是blog目录下。

注意： 我们的dist目录，default.conf和Dockefile都在同一个目录下。

image-20231213191100702
image-20231213191100702

3.4 开始制作镜像

接下来我们就可以在当前blog目录进行构建镜像了。

docker build -t blog .

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

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

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

比如：

docker build -t blog /opt/software/blog

成功之后，我们可以通过命令查看一下我们生成好的镜像。

image-20231213191825735
image-20231213191825735

3.5 运行镜像

镜像生成完毕之后，我们就可以把我们的镜像运行在容器中了。

通过以下命令来运行容器。

docker run -d -p 80:80 --name blog blog
  • -d 后台方式运行
  • -p 80: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的运行状态

最后我们启动命令，运行容器。

image-20231213192118674
image-20231213192118674

可以看到执行，成功，然后通过docker ps 查看已经运行的容器。

image-20231213192152227
image-20231213192152227

可以看到我们的容器已经成功运行了。

下面我们打开浏览器，通过我们的IP进行访问，看看效果。

image-20231213193239722
image-20231213193239722

可以看到我们的前端项目已经成功部署上去了。大功告成!!!

4.总结

以上便是本文的全部内容，本人才疏学浅，文章有什么错误的地方，欢迎大佬们批评指正！我是Leo，一个在互联网行业的小白，立志成为更好的自己。

如果你想了解更多关于Leo，可以关注公众号-程序员Leo，后面文章会首先同步至公众号。

公众号封面
公众号封面