前后端分离情况下，将本地vue项目和Laravel项目以及mysql放到自己的云服务器

一、准备工作

云服务器（ECS），我自己是腾讯云CentOS
域名
注意：需要开放端口
22（SSH）
80（HTTP）
443（HTTPS）
3306（MySQL，可选，不建议开放公网）
3000 或 5173（Vue开发服务器，生产不用）
www.yourdomain.com（Vue 前端域名）
api.yourdomain.com（Laravel）

二、服务器环境搭建

1.登录服务器（使用 SSH）

c 复制代码

ssh root@你的服务器IP

2.安装基础软件

代码如下（示例）：

c 复制代码

# 更新系统
sudo apt update && sudo apt upgrade -y

# 安装必要工具
sudo apt install -y curl wget git vim unzip

3.安装 LAMP/LEMP 环境（Laravel 所需）

安装 Nginx（Web 服务器）

c 复制代码

sudo apt install -y nginx
sudo systemctl enable nginx
sudo systemctl start nginx

安装 PHP 8.1+ 和扩展

c 复制代码

sudo apt install -y software-properties-common
sudo add-apt-repository ppa:ondrej/php -y
sudo apt update

sudo apt install -y php8.1 php8.1-fpm php8.1-mysql php8.1-curl php8.1-mbstring php8.1-xml php8.1-zip php8.1-bcmath php8.1-tokenizer

安装 MySQL

c 复制代码

sudo apt install -y mysql-server
sudo mysql_secure_installATION  # 设置 root 密码，移除匿名用户等

c 复制代码

sudo mysql -u root -p

# 在 MySQL 中执行
CREATE DATABASE clgl CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER 'laravel'@'localhost' IDENTIFIED BY 'your_password';
GRANT ALL ON clgl.* TO 'laravel'@'localhost';
FLUSH PRIVILEGES;
EXIT;

4.安装 Composer（PHP 依赖管理）

bash 复制代码

cd /tmp
curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer

5.安装 Node.js（用于构建 Vue）

bash 复制代码

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

# 验证
node -v && npm -v

三、部署 Laravel 后端

上传 Laravel 项目代码

bash 复制代码

cd /var/www
git clone 你的Laravel项目仓库地址 laravel-api
# 或者用 scp 从本地上传

安装依赖

bash 复制代码

cd /var/www/laravel-api
composer install --optimize-autoloader --no-dev

配置 .env 文件

bash 复制代码

cp .env.example .env
vim .env

c 复制代码

APP_ENV=production
APP_DEBUG=false
APP_URL=http://api.yourdomain.com

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=clgl
DB_USERNAME=laravel
DB_PASSWORD=your_password

生成应用密钥

c 复制代码

php artisan key:generate
php artisan config:cache
php artisan route:cache
php artisan view:cache

c 复制代码

sudo chown -R www-data:www-data /var/www/laravel-api
sudo chmod -R 755 storage bootstrap/cache

四、配置 Nginx 托管 Laravel API

创建 Nginx 配置文件

c 复制代码

sudo vim /etc/nginx/sites-available/api.yourdomain.com

内容如下

c 复制代码

server {
    listen 80;
    server_name api.yourdomain.com;

    root /var/www/laravel-api/public;
    index index.php index.html index.htm;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.ht {
        deny all;
    }
}

启用站点

c 复制代码

sudo ln -s /etc/nginx/sites-available/api.yourdomain.com /etc/nginx/sites-enabled/
sudo nginx -t  # 测试配置
sudo systemctl reload nginx

五、部署 Vue 前端

构建 Vue 项目（在本地执行）

bash 复制代码

cd your-vue-project
npm run build  # 生成 dist/ 目录

上传 dist 文件夹到服务器

c 复制代码

scp -r dist/* root@你的服务器IP:/var/www/html

或者：

cpp 复制代码

# 在服务器上
cd /var/www
git clone 你的Vue项目
cd vue-frontend
npm install
npm run build
sudo cp -r dist/* /var/www/html

默认 Nginx 根目录：/var/www/html

六、配置域名

域名解析
- api.yourdomain.com → 指向服务器 IP（A 记录）
- www.yourdomain.com → 指向服务器 IP
访问
- Laravel API：http://api.yourdomain.com/update-username Vue vue
- 前端：http://www.yourdomain.com

七、前后端通信配置

确保 Vue 中请求的是 Laravel 的域名

c 复制代码

// Vue 项目中
axios.post('http://api.yourdomain.com/api/update-username', {
  old_username: '小红',
  new_username: '小明'
})

八、配置 HTTPS

nginx.conf配置域名

九、启动与守护

Laravel 不需要额外启动，由 Nginx + PHP-FPM 自动处理
可选：使用 Supervisor 守护队列/任务（如需要）

c 复制代码

sudo apt install -y supervisor

十、一键部署脚本

以下是基于 Docker + Nginx 的 Vue + Laravel 前后端分离部署方案：

bash 复制代码

+-------------------+
|   浏览器访问       |
+-------------------+
         ↓
     Nginx (反向代理)
     ↙              ↘
Laravel (PHP-FPM)   Vue (静态文件)
         ↘          ↙
        MySQL + Redis

所有服务通过 docker-compose 启动。

（1）. 项目结构

c 复制代码

your-project/
├── docker-compose.yml
├── .env
├── nginx/
│   └── nginx.conf
├── laravel/
│   ├── (你的 Laravel 代码)
│   └── Dockerfile
├── vue-frontend/
│   ├── (你的 Vue 代码)
│   └── Dockerfile
└── mysql-data/      # 数据库存储（自动生成）

创建 .env 文件（环境变量）

c 复制代码

# 通用
APP_ENV=production
APP_DEBUG=false
APP_URL=http://localhost

# MySQL
MYSQL_ROOT_PASSWORD=your_root_password
MYSQL_DATABASE=clgl
MYSQL_USER=laravel
MYSQL_PASSWORD=your_laravel_password

# 服务器
HOST_PORT=80
HTTPS_PORT=443

编辑docker-compose.yml文件

c 复制代码

version: '3.8'

services:
  # ============ Nginx 反向代理 ============
  nginx:
    image: nginx:alpine
    ports:
      - "${HOST_PORT}:80"
      - "${HTTPS_PORT}:443"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./vue-frontend/dist:/usr/share/nginx/html  # Vue 静态文件
      - ./ssl:/etc/nginx/ssl:ro                    # SSL 证书（可选）
    depends_on:
      - laravel
    networks:
      - app-network

  # ============ Laravel PHP-FPM ============
  laravel:
    build:
      context: ./laravel
      dockerfile: Dockerfile
    volumes:
      - ./laravel:/var/www/html
    environment:
      - DB_HOST=mysql
      - DB_PORT=3306
      - DB_DATABASE=${MYSQL_DATABASE}
      - DB_USERNAME=${MYSQL_USER}
      - DB_PASSWORD=${MYSQL_PASSWORD}
    depends_on:
      - mysql
    networks:
      - app-network

  # ============ MySQL 数据库 ============
  mysql:
    image: mysql:8.0
    command: --default-authentication-plugin=mysql_native_password
    volumes:
      - ./mysql-data:/var/lib/mysql
      - ./mysql/init.sql:/docker-entrypoint-initdb.d/init.sql:ro  # 可选初始化
    environment:
      - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
      - MYSQL_DATABASE=${MYSQL_DATABASE}
      - MYSQL_USER=${MYSQL_USER}
      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
    networks:
      - app-network

  # ============ 可选：Redis ============
  redis:
    image: redis:alpine
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

修改/etc/nginx/nginx.conf文件

c 复制代码

events {
    worker_connections 1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    sendfile      on;
    tcp_nopush    on;
    keepalive_timeout  65;

    # === Laravel API 反向代理 ===
    server {
        listen 80;
        server_name api.yourdomain.com;

        location / {
            proxy_pass http://laravel:8000;
            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;
        }
    }

    # === Vue 前端静态服务 ===
    server {
        listen 80;
        server_name www.yourdomain.com yourdomain.com;

        root /usr/share/nginx/html;
        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }

        # API 请求代理到 Laravel（可选：避免 CORS）
        location /api/ {
            proxy_pass http://laravel:8000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
    }

    # HTTPS 配置（可选）
    # server {
    #     listen 443 ssl;
    #     ssl_certificate /etc/nginx/ssl/fullchain.pem;
    #     ssl_certificate_key /etc/nginx/ssl/privkey.pem;
    #     include /etc/nginx/ssl/options-ssl-nginx.conf;
    #     # ... 其他配置
    # }
}

修改laravel/Dockerfile

bash 复制代码

FROM php:8.1-fpm

# 安装扩展
RUN apt-get update && apt-get install -y \
    git \
    curl \
    libpng-dev \
    libonig-dev \
    libxml2-dev \
    zip \
    unzip \
    && docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd

# 安装 Composer
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

# 设置工作目录
WORKDIR /var/www/html

# 复制代码
COPY . .

# 安装 Laravel 依赖
RUN composer install --optimize-autoloader --no-dev

# 权限
RUN usermod -u 1000 www-data

# 创建缓存目录
RUN mkdir -p bootstrap/cache && chmod -R 777 storage bootstrap/cache

# 暴露端口
EXPOSE 8000

# 启动命令
CMD ["php", "artisan", "serve", "--host=0.0.0.0", "--port=8000"]

vue-frontend/Dockerfile(用于构建)
两种方式：
方式 1：本地构建（推荐）

c 复制代码

cd vue-frontend
npm run build

然后 docker-compose up -d 自动挂载 dist/

方式 2：Docker 构建（全自动）

c 复制代码

# vue-frontend/Dockerfile
FROM node:18 as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 最终镜像（轻量）
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80

然后修改 docker-compose.yml 的 nginx 服务为构建模式。

部署步骤

1. 上传代码到服务器

c 复制代码

scp -r your-project root@your-server:/opt/app

c 复制代码

cd /opt/app

3. 构建并启动

c 复制代码

docker-compose up -d --build

4. 首次部署 Laravel（生成密钥等）

c 复制代码

docker-compose exec laravel php artisan key:generate
docker-compose exec laravel php artisan config:cache
docker-compose exec laravel php artisan route:cache

5. 查看日志

c 复制代码

docker-compose logs -f

6. HTTPS 配置

安装 Certbot

bash 复制代码

sudo certbot --nginx -d api.yourdomain.com -d www.yourdomain.com

修改 nginx.conf 使用证书

c 复制代码

ssl_certificate /etc/letsencrypt/live/api.yourdomain.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/api.yourdomain.com/privkey.pem;

7. 与 GitHub Actions 结合（自动化）
让 GitHub Actions 执行,在Yaml文件修改

c 复制代码

- name: Deploy via SSH
  run: |
    ssh root@your-server "
      cd /opt/app &&
      docker-compose down &&
      git pull origin main &&
      docker-compose up -d --build
    "