jiahong
312 lines
5.9 KiB
Markdown
312 lines
5.9 KiB
Markdown
# Qoder 辅助编程实战：Linux 服务器 Web 开发企业首页
|
||
|
||
## 一、学习目标
|
||
|
||
通过本教程，您将学会：
|
||
- 使用 Qoder 连接远程 Linux 服务器
|
||
- 在服务器上搭建 Web 服务环境
|
||
- 开发一个企业首页网站
|
||
- 使用 Qoder 的 AI 辅助编程功能
|
||
|
||
---
|
||
|
||
## 二、环境准备
|
||
|
||
### 2.1、服务器环境要求
|
||
|
||
| 组件 | 版本要求 | 用途 |
|
||
|-----|---------|------|
|
||
| Linux 系统 | Ubuntu 20.04+ / CentOS 7+ | 服务器操作系统 |
|
||
| Node.js | 18.x+ | 运行环境 |
|
||
| Nginx | 1.20+ | Web 服务器 |
|
||
| Git | 2.x+ | 版本控制 |
|
||
|
||
### 2.2、Qoder 配置
|
||
|
||
确保 Qoder 已安装以下功能：
|
||
- SSH 远程连接插件
|
||
- 终端功能
|
||
- 文件浏览器
|
||
|
||
---
|
||
|
||
## 三、服务器环境搭建
|
||
|
||
### 3.1、连接服务器
|
||
|
||
在 Qoder 中打开终端，连接您的 Linux 服务器：
|
||
|
||
```bash
|
||
# 使用 SSH 连接服务器
|
||
ssh username@your-server-ip
|
||
|
||
# 示例
|
||
ssh root@192.168.1.100
|
||
```
|
||
|
||
### 3.2、安装 Node.js
|
||
|
||
```bash
|
||
# 使用 nvm 安装 Node.js
|
||
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
|
||
source ~/.bashrc
|
||
|
||
# 安装 Node.js 18
|
||
nvm install 18
|
||
nvm use 18
|
||
|
||
# 验证安装
|
||
node -v # 应显示 v18.x.x
|
||
npm -v # 应显示 9.x.x
|
||
```
|
||
|
||
### 3.3、安装 Nginx
|
||
|
||
```bash
|
||
# Ubuntu/Debian
|
||
sudo apt update
|
||
sudo apt install -y nginx
|
||
|
||
# CentOS/RHEL
|
||
sudo yum install -y epel-release
|
||
sudo yum install -y nginx
|
||
|
||
# 启动 Nginx
|
||
sudo systemctl start nginx
|
||
sudo systemctl enable nginx
|
||
|
||
# 验证安装
|
||
curl http://localhost
|
||
```
|
||
|
||
---
|
||
|
||
## 四、创建企业首页项目
|
||
|
||
### 4.1、项目结构
|
||
|
||
```
|
||
enterprise-homepage/
|
||
├── public/ # 静态资源
|
||
│ ├── css/
|
||
│ │ └── style.css
|
||
│ ├── js/
|
||
│ │ └── main.js
|
||
│ └── images/
|
||
├── views/ # 页面模板
|
||
│ └── index.html
|
||
├── server.js # 服务器入口
|
||
├── package.json
|
||
└── README.md
|
||
```
|
||
|
||
### 4.2、初始化项目
|
||
|
||
在服务器上执行：
|
||
|
||
```bash
|
||
# 创建项目目录
|
||
mkdir -p /var/www/enterprise-homepage
|
||
cd /var/www/enterprise-homepage
|
||
|
||
# 初始化 npm 项目
|
||
npm init -y
|
||
|
||
# 安装依赖
|
||
npm install express
|
||
```
|
||
|
||
---
|
||
|
||
## 五、代码开发
|
||
|
||
### 5.1、使用 Qoder 编辑远程文件
|
||
|
||
Qoder 支持通过 SSH 编辑远程服务器文件：
|
||
|
||
1. 在 Qoder 中按 `Cmd+Shift+P`
|
||
2. 选择 **"Remote-SSH: Connect to Host"**
|
||
3. 输入服务器地址和凭据
|
||
4. 打开 `/var/www/enterprise-homepage` 目录
|
||
|
||
### 5.2、核心代码文件
|
||
|
||
参考 `code/` 目录下的完整代码：
|
||
|
||
| 文件 | 路径 | 说明 |
|
||
|-----|------|------|
|
||
| `server.js` | `code/enterprise-homepage/server.js` | Express 服务器 |
|
||
| `index.html` | `code/enterprise-homepage/views/index.html` | 首页 HTML |
|
||
| `style.css` | `code/enterprise-homepage/public/css/style.css` | 样式文件 |
|
||
| `main.js` | `code/enterprise-homepage/public/js/main.js` | 交互脚本 |
|
||
|
||
---
|
||
|
||
## 六、Qoder AI 辅助编程技巧
|
||
|
||
### 6.1、代码生成
|
||
|
||
在 Qoder 中，选中代码区域或打开新文件，使用 AI 辅助：
|
||
|
||
**示例提示词：**
|
||
```
|
||
请帮我创建一个响应式的企业首页导航栏，包含：
|
||
- 公司 Logo
|
||
- 导航菜单（首页、产品、服务、关于我们、联系我们）
|
||
- 移动端汉堡菜单
|
||
- 滚动时导航栏固定并改变样式
|
||
```
|
||
|
||
### 6.2、代码解释
|
||
|
||
选中不理解的代码，右键选择 **"解释选中代码"**。
|
||
|
||
### 6.3、代码优化
|
||
|
||
选中需要优化的代码，使用提示词：
|
||
```
|
||
请优化这段代码：
|
||
1. 提高性能
|
||
2. 添加错误处理
|
||
3. 增加代码注释
|
||
```
|
||
|
||
### 6.4、调试辅助
|
||
|
||
遇到错误时，复制错误信息给 Qoder：
|
||
```
|
||
我遇到了这个错误：
|
||
[粘贴错误信息]
|
||
|
||
请帮我分析原因并提供解决方案。
|
||
```
|
||
|
||
---
|
||
|
||
## 七、部署与运行
|
||
|
||
### 7.1、启动服务
|
||
|
||
在服务器终端执行：
|
||
|
||
```bash
|
||
cd /var/www/enterprise-homepage
|
||
node server.js
|
||
```
|
||
|
||
### 7.2、使用 PM2 守护进程（生产环境）
|
||
|
||
```bash
|
||
# 安装 PM2
|
||
npm install -g pm2
|
||
|
||
# 启动服务
|
||
pm2 start server.js --name "enterprise-homepage"
|
||
|
||
# 设置开机自启
|
||
pm2 startup
|
||
pm2 save
|
||
```
|
||
|
||
### 7.3、Nginx 反向代理
|
||
|
||
```bash
|
||
# 创建 Nginx 配置文件
|
||
sudo nano /etc/nginx/sites-available/enterprise-homepage
|
||
```
|
||
|
||
添加配置：
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name your-domain.com;
|
||
|
||
location / {
|
||
proxy_pass http://localhost:3000;
|
||
proxy_http_version 1.1;
|
||
proxy_set_header Upgrade $http_upgrade;
|
||
proxy_set_header Connection 'upgrade';
|
||
proxy_set_header Host $host;
|
||
proxy_cache_bypass $http_upgrade;
|
||
}
|
||
}
|
||
```
|
||
|
||
启用配置：
|
||
```bash
|
||
sudo ln -s /etc/nginx/sites-available/enterprise-homepage /etc/nginx/sites-enabled/
|
||
sudo nginx -t
|
||
sudo systemctl reload nginx
|
||
```
|
||
|
||
---
|
||
|
||
## 八、Qoder 工作流总结
|
||
|
||
```plantuml
|
||
@startuml
|
||
skinparam componentStyle rectangle
|
||
|
||
start
|
||
:在 Qoder 中连接 SSH;
|
||
:打开远程项目目录;
|
||
:使用 AI 辅助编写代码;
|
||
:保存并同步到服务器;
|
||
:在终端启动服务;
|
||
:浏览器预览效果;
|
||
if (需要修改?) then (是)
|
||
:返回编辑代码;
|
||
else (否)
|
||
:部署完成;
|
||
endif
|
||
stop
|
||
|
||
@enduml
|
||
```
|
||
|
||
---
|
||
|
||
## 九、常见问题
|
||
|
||
### Q1: Qoder 无法连接 SSH？
|
||
**A:** 检查 SSH 配置：
|
||
```bash
|
||
# 确保 SSH 服务运行
|
||
sudo systemctl status sshd
|
||
|
||
# 检查防火墙
|
||
sudo ufw allow 22
|
||
```
|
||
|
||
### Q2: 如何上传本地文件到服务器？
|
||
**A:** 使用 scp 命令：
|
||
```bash
|
||
scp -r local-folder username@server-ip:/remote/path
|
||
```
|
||
|
||
### Q3: 如何调试 Node.js 应用？
|
||
**A:** 使用 `--inspect` 参数：
|
||
```bash
|
||
node --inspect=0.0.0.0:9229 server.js
|
||
```
|
||
然后在 Chrome 中打开 `chrome://inspect`
|
||
|
||
---
|
||
|
||
## 十、下一步学习
|
||
|
||
完成企业首页后，您可以尝试：
|
||
1. 添加后端 API 接口
|
||
2. 集成数据库（MongoDB/MySQL）
|
||
3. 实现用户认证系统
|
||
4. 添加管理后台
|
||
5. 部署到云服务器（阿里云/腾讯云/AWS）
|
||
|
||
---
|
||
|
||
## 参考资源
|
||
|
||
- [Express 官方文档](https://expressjs.com/)
|
||
- [Nginx 配置指南](https://nginx.org/en/docs/)
|
||
- [Qoder 官方文档](https://qoder.io/docs)
|