前后端分离情况下，将本地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）

ssh root@你的服务器IP

2.安装基础软件

代码如下（示例）：

# 更新系统
sudo apt update && sudo apt upgrade -y# 安装必要工具
sudo apt install -y curl wget git vim unzip

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

• 安装 Nginx（Web 服务器）

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

• 安装 PHP 8.1+ 和扩展

sudo apt install -y software-properties-common
sudo add-apt-repository ppa:ondrej/php -y
sudo apt updatesudo 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

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

• 登录 MySQL 设置 Laravel 数据库：

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 依赖管理）

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

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

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs# 验证
node -v && npm -v

三、部署 Laravel 后端

1. 上传 Laravel 项目代码

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

2. 安装依赖

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

3. 配置 .env 文件

cp .env.example .env
vim .env

APP_ENV=production
APP_DEBUG=false
APP_URL=http://api.yourdomain.comDB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=clgl
DB_USERNAME=laravel
DB_PASSWORD=your_password

4. 生成应用密钥

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

5. 设置目录权限

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

四、配置 Nginx 托管 Laravel API

创建 Nginx 配置文件

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

内容如下

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;}
}

启用站点

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

五、部署 Vue 前端

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

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

2. 上传 dist 文件夹到服务器

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

或者：

# 在服务器上
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 的域名

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

八、配置 HTTPS

nginx.conf配置域名

九、启动与守护

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

sudo apt install -y supervisor

十、一键部署脚本

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

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

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

（1）. 项目结构

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

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

# 通用
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

2. 编辑docker-compose.yml文件

version: '3.8'services:# ============ Nginx 反向代理 ============nginx:image: nginx:alpineports:- "${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:- laravelnetworks:- app-network# ============ Laravel PHP-FPM ============laravel:build:context: ./laraveldockerfile: Dockerfilevolumes:- ./laravel:/var/www/htmlenvironment:- DB_HOST=mysql- DB_PORT=3306- DB_DATABASE=${MYSQL_DATABASE}- DB_USERNAME=${MYSQL_USER}- DB_PASSWORD=${MYSQL_PASSWORD}depends_on:- mysqlnetworks:- app-network# ============ MySQL 数据库 ============mysql:image: mysql:8.0command: --default-authentication-plugin=mysql_native_passwordvolumes:- ./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:alpinenetworks:- app-networknetworks:app-network:driver: bridge

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

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;#     # ... 其他配置# }
}

4. 修改laravel/Dockerfile

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"]

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

cd vue-frontend
npm run build

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

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

# 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 服务为构建模式。

6. 部署步骤

• 1. 上传代码到服务器

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

• 2. 进入目录

cd /opt/app

• 3. 构建并启动

docker-compose up -d --build

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

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. 查看日志

docker-compose logs -f

• 6. HTTPS 配置

1. 安装 Certbot

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

2. 修改 nginx.conf 使用证书

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文件修改

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