docker在服务器中部署多个前端-Toy模板网

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

因为要做毕设买了个云服务器玩玩，刚好设做到一半，用用户端和后台两个vue的前端项目部署到服务器上做个测试~

现在阿里云的域名备案有点麻烦，现在就用<IP><端口号>就为访问网址。

在线独立课程题库管理与考试系统http://8.134.135.177:9528/

exam-userhttp://8.134.135.177:9000/#/ 部署前端是基于docker和nginx实现，简单来说就这三步，项目打包=>构建镜像=>运行容器，下面再细化一下这三个操作

一，

在我们前端项目的目录终端运行npm run build

打包完成后得到dist文件夹

二，

使用XShell或者FinalShell远程连接到我们的云服务器，在根目录下创建我们的项目文件夹，

docker部署一个项目有两个前端怎么办,docker,vue.js

现在，我创建了两个文件夹一个admin,一个user。分别对应两个前端。

进入admin文件夹，准备构建镜像。使用docker构建镜像我们一般是用nginx作为基础镜像去构建的，所以我们需要准备Dockerfile文件，下面是我的Dockerfile文件：

# 使用NGINX作为基础镜像
FROM nginx
# 复制解压后的网站文件到NGINX默认路径下
COPY admin/ /usr/share/nginx/html/
# 将你的 NGINX 配置文件复制到容器中的 NGINX 配置目录
COPY default.conf /etc/nginx/conf.d/default.conf

注意这里admin/是我这个admin目录里面的admin文件夹，里面是第一步里面dist里的所有文件，default.conf是等下要写的配置文件。两个都需要按照自己的文件名做修改，其他不要动

default.conf文件：(长得基本都一样，改改后端IP直接复制就能用)

upstream my_server{
  server 8.134.135.177:8080; # 后端server 地址
  keepalive 2000;
}

server {
    listen       80; #这里的端口号不要动，80端口指的是容器的端口，最后我们会将容器的端口映射到我们宿主服务器的端口，比如映射到8888端口
    server_name  8.134.135.177; # 修改为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;
    }
}

都配置完成后admin文件夹里面长这个样子，一共三个文件

docker部署一个项目有两个前端怎么办,docker,vue.js

下面开始使用docker构建镜像

使用命令行进到这个文件夹运行下面指令，构建镜像

docker build -t exam-admin .

docker build：这是构建 Docker 镜像的命令。
-t exam-admin：这个标志指定了构建的镜像的名称为 "exam-admin"。
.：这个点表示 Docker 将在当前目录下查找 Dockerfile 文件来构建镜像。 Dockerfile 包含了构建镜像的指令和配置。

三，

ok，现在我们得到镜像之后，直接启动容器运行我们的镜像可以了~

docker run -d -p 9528:80 --name exam-admin exam-admin

docker run：这是运行 Docker 容器的命令。
-d：这个标志告诉 Docker 在后台以分离模式运行容器，也就是在后台运行。
-p 9528:80：这个标志将主机上的端口9528映射到容器内的端口80。因此，发送到主机上端口9528的任何流量都将转发到容器内的端口80。
--name exam-admin：这个标志为容器指定了名称 "exam-admin"。
exam-admin：这是用于创建容器的 Docker 镜像的名称。这个容器将从该镜像实例化而来。

结尾

如果用docker-compose，可以把二，三这些操作都写到里面。简化操作

例如：

version: '3'
services:
exam-user:
build:
context: ./ljc/project/web/user
dockerfile: Dockerfile
ports:
- "9000:80"
container_name: exam-user
restart: unless-stopped

exam-admin:
build:
context: ./ljc/project/web/admin
dockerfile: Dockerfile
ports:
- "9528:80"
container_name: exam-admin
restart: unless-stopped

最后运行的容器状态：

docker部署一个项目有两个前端怎么办,docker,vue.js