硅谷甄选项目容器化

前期的准备

因为dockerHub上面的镜像来自外网，linux上面不好用vpn。后面就在mac上安装了docker，通过mac下载镜像，再docker save压缩上传到服务器上面。

搭建容器项目

创建zxadmin网络

因为nginx要使用容器名称标识php-fpm服务，所以要创建网络

docker network create zxadmin

 

搭建php-fpm的项目

• 把php-fpm、php-composer镜像进行docker save 打包移动到测试环境。

• 把已经写好的Dockerfile文件的项目上传到服务器

     

• 查看Dockerfile文件，看是否有需要更改的地方　　

#php-fpm镜像地址
FROM php:8.2.27-fpm-alpine3.20
#设置容器进入目录
WORKDIR /var/www/zxAdmin
#安装系统依赖和 PHP 扩展
RUN apk add --no-cache \
        icu-dev \
        libzip-dev \
        zip \
        unzip \
        git \
        bash \
    && docker-php-ext-configure intl \
    && docker-php-ext-install pdo_mysql intl opcache zip
#安装composer
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer
# 复制项目代码到容器中
COPY . /var/www/zxAdmin
# 安装项目依赖
RUN composer install --no-dev --no-interaction --optimize-autoloader
# 设置正确的权限
RUN chown -R www-data:www-data /var/www/zxAdmin/ \
    && chmod -R 755 /var/www/zxAdmin/storage \
    && chmod -R 755 /var/www/zxAdmin/bootstrap/cache
# 暴露默认端口（如果有需要的话）
EXPOSE 9000
# 启动 PHP-FPM
CMD ["php-fpm"]

• 使用docker build 构建Dockerfile文件

    

• 查看镜像，并启动容器

docker run -d --name zxadmin -p 9001:9000 \
--network zxadmin \
zxadmin:latest

 搭建nginx容器镜像

  这里前端vue3服务和后端laravel服务分离成不同的端口和不同的server项，放置到不同的配置文件中。

配置连接php-fpm配置文件

在项目的根目录下配合nginx.conf文件来转发前端前端给php-fpm

#docker run -d --name nginx01 -p 8087:80 -v ./nginx.conf:/etc/nginx/conf.d/default.conf\ -v /Users/hoge/Desktop/code/php/zxAdmin:/var/www/zxAdmin nginx:stable-perl
server {
    listen 80;
    server_name localhost;
    root /var/www/zxAdmin/public;
    index index.php index.html;
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass zxadmin:9000;  # 这里是关键： 使用 PHP-FPM 容器的服务名和内部监听端口
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
    location ~ /\.ht {
        deny all;
    }
}

注意：这里fastcgi_pass我们使用的是docker run 的时候--name ,只有配置了网络，才可以使用这个--name。这也是为什么前面用了网络的原因.

配置前端访问的nginx配置文件

定义front_nginx.conf配置文件，用来配置vue3项目。

server {
    listen 89;
    server_name 127.0.0.1; # 替换为你的域名或 IP 地址
    root /var/www/dist;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
    #解决跨域问题
   # 这里的/api/是代理路径前缀，可以根据需要调整
  location /api/ {
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://10.200.15.21:8087; # 目标服务器地址和端口
        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;
        # 解决跨域问题的头部信息
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

        # 如果需要支持预检请求（OPTIONS），可以像下面这样处理
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}

启动nginx镜像容器

docker run -d --name nginx \
  -p 8087:80 \
  -p 8089:89 \
  -v ./nginx.conf:/etc/nginx/conf.d/default.conf \
  -v ./:/var/www/zxAdmin \
  -v /m2odata/project/zx/dist:/var/www/dist \
  -v ./front_nginx.conf:/etc/nginx/conf.d/front_nginx.conf \
  --network zxadmin \
  nginx:stable-perl

  这里面-p 8087:80 表示的是后端项目与宿主机映射端口， -p 8089:89表示前端vue3与宿主机映射的端口。

访问前端项目，可以访问通。

 

注意：由于后端的项目和前端的项目使用的不同的端口，因此会有跨域问题。

为了解决跨域问题：通过nginx进行反向代理后端的请求

1、前端.env.production中修改api配置，为/api，如图

2、修改.front_nginx.conf配置文件，对api/的请求进行转发，如图；

 3、重启容器

 

构建MySQL容器

因为测试环境的MySQL的root密码忘记，也重置不了。所以下载最新的mysql8，让mysql也容器化。

从docker hub中pull容器，并在mac上导出容器

我第一次MySQL,可以指定创建数据库用户名和密码，但是这里涉及隐私就不写了

sudo docker run --name my-mysql \
  -e MYSQL_ROOT_PASSWORD=325401 \
  -v /my/own/mysql8/datadir:/var/lib/mysql \
  -p 3308:3306 \
  -d mysql:lts

 第二次的时候就不用指定-e参数了。

sudo docker run --name my-mysql \
  -v /my/own/mysql8/datadir:/var/lib/mysql \
  -p 3308:3306 \
  -d mysql:lts

通过navicate看到连接完成。

 

至此，项目配置完成，可以通过ip+端口的方式访问项目