ssh vue 实现

SSH 与 Vue 结合的常见场景

SSH（Secure Shell）通常用于远程服务器管理，而 Vue 是一个前端框架。两者结合的场景可能包括：

1. 部署 Vue 项目到远程服务器：通过 SSH 连接服务器并部署 Vue 构建后的静态文件。
2. 开发环境配置：在远程开发环境中使用 Vue 进行开发，通过 SSH 访问该环境。
3. 自动化脚本：使用 SSH 执行远程命令，触发 Vue 项目的构建或部署流程。

通过 SSH 部署 Vue 项目

将 Vue 项目构建后的文件部署到远程服务器的典型流程：

构建 Vue 项目，生成静态文件：

npm run build

使用 SCP（基于 SSH 的文件传输）将 dist 目录上传到服务器：

scp -r dist/ user@remote-server:/path/to/destination

通过 SSH 登录服务器并配置 Web 服务器（如 Nginx）以服务这些静态文件：

ssh user@remote-server
sudo nano /etc/nginx/sites-available/your-site

Nginx 配置示例：

server {
    listen 80;
    server_name your-domain.com;

    root /path/to/destination;
    index index.html;

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

在远程开发环境中使用 Vue

在远程服务器上设置 Vue 开发环境：

通过 SSH 连接到远程服务器：

ssh user@remote-server

在服务器上安装 Node.js 和 npm：

curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs

克隆 Vue 项目或创建新项目：

git clone your-vue-project.git
cd your-vue-project
npm install

运行开发服务器并通过本地端口转发访问：

npm run dev

在本地终端中：

ssh -L 8080:localhost:8080 user@remote-server

然后在本地浏览器中访问 http://localhost:8080。

自动化部署脚本

创建自动化部署脚本（deploy.sh）：

#!/bin/bash
npm run build
scp -r dist/ user@remote-server:/path/to/destination
ssh user@remote-server "sudo systemctl restart nginx"

确保脚本有执行权限：

chmod +x deploy.sh

安全注意事项

使用 SSH 密钥对而非密码进行认证更安全：

ssh-keygen -t rsa -b 4096
ssh-copy-id user@remote-server

在 Vue 项目中避免硬编码敏感信息，使用环境变量：

// .env.production
VUE_APP_API_URL=https://api.your-domain.com

故障排除

如果 SSH 连接失败，检查服务器是否运行 SSH 服务：

sudo systemctl status ssh

端口转发问题可能是由于服务器防火墙阻止了端口，需确保端口开放：

sudo ufw allow 8080/tcp

部署后如果出现 404 错误，检查 Nginx 配置是否正确处理了 Vue 的路由。