服务器上部署一个前端项目

1. 在 Ubuntu 上安装 Docker

步骤 1：更新软件包索引

▼
text
复制代码
sudo apt-get update

sudo：以超级用户权限运行命令，允许执行需要更高权限的操作。
apt-get：Ubuntu 和 Debian 系统的包管理工具。
update：更新本地的软件包索引，确保获取到最新的软件包信息。

步骤 2：安装必要的包

▼
text
复制代码
sudo apt-get install apt-transport-https ca-certificates curl software-properties-common

install：安装指定的软件包。
apt-transport-https：允许 apt 使用 HTTPS 协议，确保下载的软件包是安全的。
ca-certificates：使得系统能够验证 SSL 证书，确保安全连接。
curl：用于下载文件和网页内容的命令行工具。
software-properties-common：提供 add-apt-repository 命令，方便管理软件源。

步骤 3：添加 Docker 的官方 GPG 密钥

▼
text
复制代码
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

从指定 URL 下载文件，参数含义如下：

f：如果发生错误，curl 将不输出错误信息。
s：以静默模式运行，不显示进度。
L：如果 URL 被重定向，curl 将自动跟随重定向。
|：管道符，将 curl 下载的内容作为输入传递给后面的命令。
sudo apt-key add -：将下载的 GPG 密钥添加到系统中，以验证软件包的合法性。

步骤 4：添加 Docker 仓库

▼
text
复制代码
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

add-apt-repository：添加新的软件源。
"deb [arch=amd64] ..."：指定新仓库的格式和位置，deb 表示这是一个二进制包。
$(lsb_release -cs)：自动获取当前 Ubuntu 版本的代号（例如，bionic、focal），以确保添加适合该版本的软件源。
stable：指定要使用的版本（稳定版）。

步骤 5：再次更新软件包索引

▼
text
复制代码
sudo apt-get update

重新执行此命令以更新软件包索引，包含刚刚添加的 Docker 仓库。

步骤 6：安装 Docker

▼
text
复制代码
sudo apt-get install docker-ce

install：安装指定的软件包。
docker-ce：安装 Docker Community Edition，Docker 的开源版本。

步骤 7：启动 Docker 并设置开机自启动

▼
text
复制代码
sudo systemctl start docker
sudo systemctl enable docker

systemctl start docker：启动 Docker 服务，使其在后台运行。
systemctl enable docker：设置 Docker 服务为开机自动启动，这样每次重启服务器时 Docker 服务会自动启动。

步骤 8：验证 Docker 安装

▼
text
复制代码
sudo docker run hello-world

docker run：启动一个新的 Docker 容器。
hello-world：这是一个测试镜像，用于验证 Docker 是否正确安装并能正常运行。运行该命令会下载并执行该镜像，显示成功消息。

2.安装NGINX

拉取镜像

▼
text
复制代码
docker pull nginx:1.24.0

运行容器

▼
text
复制代码
docker run --name nginx -p 80:80 -d nginx:1.24.0

创建本地挂载的目录

▼
text
复制代码
mkdir -p /docker/nginx/conf mkdir -p /docker/nginx/log mkdir -p /docker/nginx/html

复制运行的nginx配置到宿主机上

▼
text
复制代码
将容器nginx.conf文件复制到宿主机 
docker cp nginx:/etc/nginx/nginx.conf /docker/nginx/conf/nginx.conf 

将容器conf.d文件夹下内容复制到宿主机 
docker cp nginx:/etc/nginx/conf.d /docker/nginx/conf/conf.d

将容器中的html文件夹复制到宿主机 
docker cp nginx:/usr/share/nginx/html /docker/nginx/ 

将容器中的日志log文件夹复制到宿主机 
docker cp nginx:/var/log/nginx/ /docker/nginx/log

上述命令执行完毕删除运行的容器

▼
text
复制代码
docker stop 容器id docker rm 容器id

正式运行

▼
text
复制代码
docker run  -p 80:80 -p 5010:5010   --restart=always --name nginxWeb -v /docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /docker/nginx/conf/conf.d:/etc/nginx/conf.d -v /docker/nginx/log:/var/log/nginx -v /docker/nginx/html:/usr/share/nginx/html -d nginx:1.24.0;

配置NGINX配置文件

cd进入到conf/conf.d/default.conf中区编辑

配置多个server去部署多个项目

▼
text
复制代码
server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html/build;
        index  index.html index.htm;
         try_files   $uri   $uri/  /index.html;
    }

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

server {
    listen       5010;
    listen  [::]:5010;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html/dist;
        index  index.html index.htm;
         try_files   $uri   $uri/  /index.html;

    }

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

配置一个server去部署多个项目

▼
text
复制代码
server {
    listen 80;
    listen [::]:80;
    server_name localhost;

    client_max_body_size 100M;  # Adjust this size as needed

    # 官网静态页面 (默认主页)
    location / {
        root /usr/share/nginx/html/gw_web;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    # Java 后端服务（代理到9001端口）
    location /compute {
        proxy_pass http://172.19.400.108:9001/jiutuai/api1/;   # 反向代理到 Java 服务，记得结尾需要加上/
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Python 后端服务（代理到5000端口）
    location /tupu {
        proxy_pass http://localhost:5000;   # 反向代理到 Python 服务
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 知识图谱前端页面（5010端口对应的前端）
    location /kg {
        alias /usr/share/nginx/html/kg/dist;
        index index.html index.htm;
        try_files $uri $uri/ /kg/index.html;  # SPA 路由处理
    }

    # AI 书籍前端页面（9003端口对应的前端）
    location /ai_book {
        alias /usr/share/nginx/html/ai_book/dist;
        index index.html index.htm;
        try_files $uri $uri/ /ai_book/index.html;  # SPA 路由处理
    }

    # 错误页面配置
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

重启NGINX容器

▼
text
复制代码
docker restart id