素材巴巴 > 程序开发 >

【Docker】docker Nginx部署前端项目

程序开发 2023-09-05 17:36:27

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

文章目录

相关配置安装

安装Docker

 yum install docker
 

启动服务 start docker

systemctl start docker
 

Docker中拉取nginx镜像

docker pull nginx
 

创建配置文件

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

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

在这里插入图片描述

Dokcerfile文件具体内容如下:

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

default.conf

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

8888:80
 

完整配置:

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放到同一目录,并上传到服务器。

在这里插入图片描述

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

然后需要构建镜像

docker build -t test .
 

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

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

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

比如:

dokcer build -t test /home/test
 

在这里插入图片描述

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

在这里插入图片描述


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

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

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

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


注意

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

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

或者使用命令设置

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

一些相关指令

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

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

首先拿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实现自动化部署。


标签:

上一篇: AngularJS学习 之 创建项目 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。