前端项目部署方案
目录
前端项目部署方案
使用 Nginx 部署到服务器
1. 上传文件
将本地项目构建生成的
dist
文件夹上传到服务器的指定目录，例如
/var/www/vue3-app
。你可以使用
scp
命令进行上传：
scp -r dist user@server_ip:/var/www/vue3-app其中
user
是服务器用户名，
server_ip
是服务器的 IP 地址。
2. 安装和配置 Nginx
在服务器上安装 Nginx：
# Ubuntu/Debian
sudo apt-get update
sudo apt-get install nginx
# CentOS/RHEL
sudo yum install nginx配置 Nginx 以指向你的项目文件。创建一个新的 Nginx 配置文件，例如
/etc/nginx/conf.d/vue3-app.conf
：
server {
listen 80;
server_name your_domain_or_ip; # 替换为你的域名或服务器 IP
root /var/www/vue3-app;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}3. 验证和重启 Nginx
验证 Nginx 配置文件的语法是否正确：
sudo nginx -t如果语法正确，重启 Nginx 服务：
sudo systemctl restart nginx现在，你可以在浏览器中访问你的域名或服务器 IP 来查看部署好的 Vue 3 项目。
使用 Docker 部署
1. 编写 Dockerfile
在项目根目录下创建一个
Dockerfile
，内容如下：
# 基础镜像，使用 Node.js 作为构建环境
FROM node:18-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# 第二阶段，使用 Nginx 作为生产环境服务器
FROM nginx:1.23-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]同时，你可以创建一个
nginx.conf
文件来配置 Nginx：
server {
listen 80;
server_name _;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}2. 构建 Docker 镜像
在项目根目录下执行以下命令构建 Docker 镜像：
docker build -t my-vue3-app .3. 运行 Docker 容器
构建好镜像后，使用以下命令运行 Docker 容器：
docker run -d -p 8080:80 my-vue3-app这里将容器的 80 端口映射到主机的 8080 端口，你可以根据需要调整。
使用云平台部署（以 Vercel 为例）
1. 注册和登录 Vercel
访问 注册并登录账号。
2. 关联代码仓库
将你的 Vue 3 项目代码托管到 GitHub、GitLab 或 Bitbucket 等代码托管平台。在 Vercel 中关联你的代码仓库。
3. 配置部署
Vercel 会自动检测到你的 Vue 3 项目，并提供默认的构建和部署配置。你可以根据需要进行自定义配置，例如指定构建命令和输出目录。
4. 部署项目
完成配置后，Vercel 会自动触发部署流程，部署完成后会提供一个访问链接，你可以在浏览器中访问该链接查看部署好的项目。