部署前端项目2

最新推荐文章于 2025-03-16 19:23:30 发布

augenstern416

最新推荐文章于 2025-03-16 19:23:30 发布

阅读量487

点赞数 5

文章标签：前端

本文链接：https://blog.youkuaiyun.com/augenstern416/article/details/145722900

版权

前端项目的部署是将开发完成的前端代码发布到服务器或云平台，使其能够通过互联网访问。以下是前端项目部署的常见步骤和工具：

1. 准备工作

在部署之前，确保项目已经完成以下步骤：

代码优化：压缩 JavaScript、CSS 和图片文件，减少文件体积。
环境配置：区分开发环境和生产环境（如 API 地址、环境变量等）。
测试：确保项目在本地测试通过，没有明显 Bug。

2. 部署流程

1. 构建项目

大多数前端项目（如 React、Vue、Angular）都需要先进行构建，生成生产环境可用的静态文件。

React：
```
npm run build
```
构建完成后，会在项目根目录生成一个 build 文件夹，里面包含所有静态文件。
Vue：
```
npm run build
```
构建完成后，生成 dist 文件夹。
Angular：
```
ng build --prod
```
构建完成后，生成 dist 文件夹。

2. 选择部署方式

根据项目需求选择合适的部署方式。常见的部署方式包括：

3. 部署方式

1. 静态文件托管

将构建后的静态文件上传到静态文件托管服务。

GitHub Pages：

在项目根目录运行：
```
npm install -g gh-pages
```

在 package.json 中添加：

"homepage": "https://<username>.github.io/<repo-name>",
"scripts": {
  "deploy": "gh-pages -d build"
}

运行部署命令：
```
npm run deploy
```

Netlify：
1. 将代码推送到 GitHub/GitLab。
2. 登录 Netlify，选择仓库并配置构建命令和发布目录（如 build 或 dist）。
3. Netlify 会自动部署并生成一个访问链接。
Vercel：
1. 将代码推送到 GitHub/GitLab。
2. 登录 Vercel，选择仓库并配置构建命令和发布目录。
3. Vercel 会自动部署并生成一个访问链接。

2. 云服务器部署

将静态文件上传到云服务器（如 Nginx、Apache）。

Nginx：

将构建后的静态文件上传到服务器（如 /var/www/html）。

配置 Nginx：

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/html;
    index index.html;

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

重启 Nginx：
```
sudo systemctl restart nginx
```

Apache：

将构建后的静态文件上传到服务器（如 /var/www/html）。

配置 Apache：

<VirtualHost *:80>
    DocumentRoot /var/www/html
    ServerName yourdomain.com
    <Directory /var/www/html>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

重启 Apache：
```
sudo systemctl restart apache2
```

3. Docker 部署

将前端项目打包成 Docker 镜像并部署到服务器。

创建 Dockerfile：

# 使用 Node.js 作为基础镜像
FROM node:16 as build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 使用 Nginx 作为运行环境
FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

构建 Docker 镜像：
```
docker build -t my-frontend-app .
```
运行 Docker 容器：
```
docker run -d -p 80:80 my-frontend-app
```

4. CDN 加速

将静态文件上传到 CDN（内容分发网络），以提高访问速度。

使用阿里云、腾讯云等 CDN 服务，将静态文件上传到 CDN。

在 HTML 中引用 CDN 上的文件：

<script src="https://cdn.example.com/js/app.js"></script>
<link rel="stylesheet" href="https://cdn.example.com/css/style.css">

4. 自动化部署

使用 CI/CD 工具实现自动化部署。

GitHub Actions：

在项目根目录创建 .github/workflows/deploy.yml 文件。

配置自动化部署脚本：

name: Deploy
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

GitLab CI/CD：

在项目根目录创建 .gitlab-ci.yml 文件。

配置自动化部署脚本：

stages:
  - deploy
deploy:
  stage: deploy
  script:
    - npm install
    - npm run build
    - rsync -avz ./build user@server:/var/www/html

5. 域名绑定

在域名管理平台（如阿里云、GoDaddy）将域名解析到服务器 IP 或 CDN 地址。
配置服务器的 Nginx/Apache，绑定域名。

6. HTTPS 配置

使用 Let’s Encrypt 免费 SSL 证书：

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com

配置 Nginx 支持 HTTPS：

server {
    listen 443 ssl;
    server_name yourdomain.com;
    ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;
    root /var/www/html;
    index index.html;
}