云信AI部署

深入浅出GitHub Top项目：Vue.js在AWS EC2的运行与调试

云信安装大师
90
AI 质量分
10 5 月, 2025
4 分钟阅读
0 阅读

深入浅出GitHub Top项目：Vue.js在AWS EC2的运行与调试

引言

Vue.js作为GitHub上最受欢迎的前端框架之一，如何在云端环境中部署和调试是许多开发者关心的问题。本文将手把手教你如何在AWS EC2实例上运行和调试Vue.js项目，包括环境配置、项目部署和常见问题解决。

准备工作

环境要求

  1. 一个AWS账号（可免费注册）
  2. 本地开发环境已安装Node.js（建议版本14+）
  3. 基本的Linux命令行知识
  4. Git客户端

AWS EC2实例选择

  • 推荐使用Amazon Linux 2或Ubuntu Server 20.04 LTS
  • t2.micro实例类型（符合免费套餐条件）
  • 至少8GB存储空间

第一步：创建并连接EC2实例

1.1 创建EC2实例

  1. 登录AWS控制台，进入EC2服务
  2. 点击”启动实例”
  3. 选择Amazon Linux 2 AMI或Ubuntu Server
  4. 选择t2.micro实例类型
  5. 配置安全组，确保开放以下端口：
    • SSH (22)
    • HTTP (80)
    • HTTPS (443)
  6. 创建并下载密钥对（.pem文件）

1.2 SSH连接EC2实例

代码片段 
# Mac/Linux用户
chmod 400 your-key.pem
ssh -i "your-key.pem" ec2-user@your-instance-public-dns

# Windows用户可使用PuTTY或Windows Terminal

第二步：安装必要软件

2.1 Node.js安装（以Ubuntu为例）

代码片段 
# Ubuntu系统
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

# Amazon Linux系统
curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo yum install -y nodejs

# 验证安装
node -v
npm -v

2.2 Git安装与配置

代码片段 
sudo apt-get install git   # Ubuntu/Debian
sudo yum install git       # Amazon Linux/CentOS

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

2.3 Nginx安装（用于生产环境部署）

代码片段 
sudo apt-get install nginx   # Ubuntu/Debian
sudo yum install nginx       # Amazon Linux/CentOS

# 启动Nginx并设置开机自启
sudo systemctl start nginx 
sudo systemctl enable nginx

# Nginx常用命令：
# sudo systemctl stop nginx    #停止服务 
# sudo systemctl restart nginx #重启服务

第三步：克隆并运行Vue.js项目

3.1 Clone GitHub上的Vue项目示例（以vue-element-admin为例）

代码片段 
git clone https://github.com/PanJiaChen/vue-element-admin.git 
cd vue-element-admin 

# Vue CLI项目需要先安装依赖 
npm install 

# Vue CLI项目启动开发服务器 
npm run dev 

# Vue CLI项目构建生产版本 
npm run build 

# Vite项目启动开发服务器 
npm run dev 

# Vite项目构建生产版本 
npm run build

注意：如果遇到内存不足问题，可以增加swap空间：

代码片段 
sudo dd if=/dev/zero of=/swapfile bs=128M count=16 
sudo chmod 600 /swapfile 
sudo mkswap /swapfile 
sudo swapon /swapfile 

#永久生效可以添加到/etc/fstab文件中:
/swapfile swap swap defaults,nofail,noatime,discard,sw,pri=1000,comment=cloudconfig,size=2048M,unit=M,timeout=60,max_retries=5,tries=5,nobootwait,x-systemd.device-timeout=60,x-systemd.mount-timeout=60,x-systemd.service-timeout=60,x-systemd.swap-timeout=60,x-systemd.wants=nfs-client.target,x-systemd.wants=rpcbind.target,x-systemd.wants=nfs-idmap.target,x-systemd.wants=nfs-lock.target,x-systemd.wants=nfs-server.target,x-systemd.wants=rpc-statd-notify.target,x-systemd.wants=rpc-statd.target,x-systemd.wants=rpcbind.socket,x-systemd.wants=rpcbind.service,x-systemd.wants=rpc-statd.service,x-systemd.wants=nfs-client.service,x-systemd.wants=nfs-server.service,x-systemd.wants=nfs-idmap.service,x-systemd.wants=nfs-lock.service,x-systemd.wants=rpc-statd-notify.service,comment=cloudconfig,nofail,_netdev,auto,nofail,_netdev,auto,nofail,_netdev,auto,nofail,_netdev,auto,nofail,_netdev,auto,nofail,_netdev,auto,nofail,_netdev,auto,nofail,_netdev,auto,nofail,_netdev,auto,nofail,_netdev,auto,nofail,_netdev,auto,nofail,_netdev,auto,nofail,_netdev,auto,nofail,_netdev,auto,nofail,_netdev,auto,nofail,_netdev,auto,nofail,_netdev,auto,nofail,_netdev,auto,nofail,_netdev,

第四步：配置Nginx反向代理

为了使Vue应用可以通过域名或IP访问，我们需要配置Nginx作为反向代理：

代码片段 
sudo vim /etc/nginx/conf.d/vue-app.conf

添加以下内容：

代码片段 
server {  
    listen       80;  
    server_name  你的域名或IP;  

    location / {  
        root   /home/ec2-user/vue-element-admin/dist;  
        index index.html;  
        try_files $uri $uri/ /index.html;  
    }  

    error_page   50050250350450x.html;  
    location = /50x.html {  
        root   html;  
    }  
}

测试Nginx配置并重启：

代码片段 
sudo nginx -t && sudo systemctl restart nginx

现在你应该可以通过浏览器访问你的EC2实例的公共IP来查看Vue应用了！

第五步：使用PM2管理Node进程

在生产环境中，我们通常使用PM来管理Node.js进程以确保应用持续运行：

代码片段 

npm install pm@latest-g  

pm start npm --name "vue-app" -- run dev  

pm save  

pm startup  

pm monit

常用PM命令：

  • pm list查看所有进程状态

  • pm logs vue-app查看日志

  • pm restart vue-app重启应用

  • pm delete vue-app删除应用

第六步：调试技巧

6远程调试

如果你需要在服务器上进行调试，可以使用Chrome DevTools远程调试功能：

首先在服务器上启动Node时添加–inspect参数：

代码片段 

// package.json中修改scripts部分:  

"scripts": {  

    "debug": "node --inspect-brk node_modules/.bin/vue-cli-service serve",  

}

然后在本地Chrome浏览器访问：

代码片段 
chrome://inspect/#device   

点击"Configure..."添加服务器的IP和9229端口   

最后运行`npm run debug`即可开始远程调试

6日志分析

结合以下命令分析日志：

代码片段 

tail-f ~/.pm/logs/vue-app-out.log #标准输出日志   

tail-f ~/.pm/logs/vue-app-error.log #错误日志   

journalctl-u nginx--since today | grep error #Ngin错误日志   

df-h #检查磁盘空间   

free-mh #检查内存使用情况   

top #实时监控系统资源

常见问题解决

Q1: npm install时出现权限错误？
A:不要使用root权限运行npm，而是修复权限问题：

代码片段 
mkdir ~/.npm-global   
npm config set prefix '~/.npm-global'   
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc   
source ~/.bashrc   
chown-R $(whoami) ~/.npm

然后重新运行npm install

Q:NPM安装速度慢？
A:使用淘宝镜像：

代码片段 
npm config set registry https://registry.npmmirror.com/

或者使用yarn:

代码片段 
npm install-g yarn    
yarn config set registry https://registry.npmmirror.com/    
yarn install

Q:页面刷新出现404？
A:确保Ngin配置中包含try_files指令(如步骤4所示)，并且Vuerouter使用了history模式。

Q:如何更新代码？
A:

代码片段 
git pull origin master    
npm install    
npm run build

如果使用PM:

代码片段 
pm restart vue-app

总结

通过本文的步骤，我们完成了以下工作:

1创建并连接了AWS EC实例
安装了Node.js、Git和Ngin等必要软件
克隆了GitHub上的热门Vue.js项目并在服务器上运行
配置了Ngin作为反向代理使应用可通过IP访问
使用PM管理Node进程确保稳定运行
学习了远程调试和日志分析的技巧

关键要点:

始终在非root用户下操作保证安全
生产环境一定要使用PM等进程管理工具
定期检查系统资源使用情况
利用Ngin的缓存功能可以显著提高性能

希望这篇指南能帮助你在AWS EC上顺利部署和调试Vue.js应用！如果有任何问题欢迎留言讨论。

原创 高质量