1. 环境配置工作日志第一周实战记录刚接手新项目时环境配置总是最让人头疼的环节。上周我负责搭建一个全栈开发环境从零开始配置前后端联调环境过程中踩了不少坑也积累了些实用经验。这份工作日志记录了完整的配置流程和关键问题的解决方案特别适合需要快速搭建标准化开发环境的同行参考。2. 基础环境准备2.1 操作系统与基础工具链我选择Ubuntu 22.04 LTS作为基础系统这个长期支持版本稳定性有保障。先用apt-get update apt-get upgrade更新系统后安装以下基础工具包sudo apt install -y git curl wget build-essential特别提醒build-essential包含gcc/g等编译工具链很多开发工具的安装都依赖这些基础组件。如果跳过这步后续安装某些工具时可能会出现command not found的错误。2.2 版本控制配置配置Git全局信息时建议使用公司邮箱而非个人邮箱git config --global user.name YourName git config --global user.email your.namecompany.com同时设置默认分支为main现代项目规范git config --global init.defaultBranch main注意如果公司使用GitLab等平台还需要配置SSH密钥。生成密钥后记得把公钥添加到Git托管平台。3. 开发环境搭建3.1 后端开发环境选择Node.js 18.x LTS版本作为后端运行时curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - sudo apt-get install -y nodejs验证安装时发现npm版本较旧需要单独升级sudo npm install -g npmlatest数据库选用PostgreSQL 14安装后需要配置远程访问权限sudo apt install postgresql postgresql-contrib sudo -u postgres psql -c ALTER USER postgres PASSWORD your_password;3.2 前端开发环境使用nvm管理Node版本是个好选择可以隔离不同项目的Node环境curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash source ~/.bashrc nvm install 16安装Vue CLI时遇到权限问题改用普通用户安装npm install -g vue/cli经验全局安装包时如果报EACCES错误可以配置npm使用其他目录mkdir ~/.npm-global npm config set prefix ~/.npm-global4. 联调环境配置4.1 代理服务器设置开发时前后端分离需要配置代理解决跨域问题。在vue.config.js中添加module.exports { devServer: { proxy: { /api: { target: http://localhost:3000, changeOrigin: true } } } }4.2 环境变量管理使用dotenv管理环境变量创建.env.development文件VUE_APP_API_BASEhttp://localhost:3000 DB_HOSTlocalhost DB_PORT5432后端读取时注意require(dotenv).config() console.log(process.env.DB_HOST)5. 常见问题排查5.1 端口冲突问题启动服务时报端口占用错误用lsof查找占用进程sudo lsof -i :3000 kill -9 PID5.2 依赖版本冲突删除node_modules和package-lock.json后重新安装rm -rf node_modules package-lock.json npm install5.3 数据库连接失败检查pg_hba.conf配置添加host all all 0.0.0.0/0 md5然后重启PostgreSQL服务sudo service postgresql restart6. 开发辅助工具6.1 代码质量检查配置ESLintPrettier统一代码风格npm install eslint prettier eslint-plugin-vue --save-dev创建.eslintrc.js配置文件module.exports { root: true, env: { node: true }, extends: [ plugin:vue/essential, eslint:recommended ], rules: { no-console: off } }6.2 接口调试工具安装Postman并配置环境变量建议将常用请求保存为集合。也可以使用VS Code的REST Client插件直接在项目里保存.http文件GET http://localhost:3000/api/users Content-Type: application/json7. 容器化准备7.1 Docker基础配置安装Docker后将当前用户加入docker组避免sudosudo usermod -aG docker $USER newgrp docker7.2 编写Dockerfile后端服务的Dockerfile示例FROM node:18-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 3000 CMD [node, server.js]构建和运行命令docker build -t backend . docker run -p 3000:3000 -d backend8. 持续集成准备8.1 GitHub Actions配置创建.github/workflows/ci.yml文件name: CI on: [push] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkoutv3 - uses: actions/setup-nodev3 with: node-version: 18 - run: npm install - run: npm test8.2 自动化部署脚本编写deploy.sh脚本#!/bin/bash git pull npm install npm run build pm2 restart all记得给执行权限chmod x deploy.sh9. 文档与知识管理9.1 项目文档结构建议采用如下目录结构/docs /architecture # 架构设计 /api # API文档 /deployment # 部署指南 /meetings # 会议记录9.2 Markdown文档规范配置VS Code的Markdown插件统一使用如下Front Matter--- title: 环境配置指南 date: 2023-07-20 tags: [环境, 配置] ---10. 效率工具推荐10.1 命令行增强工具安装zsh和oh-my-zsh提升终端效率sudo apt install zsh sh -c $(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)推荐插件zsh-autosuggestionszsh-syntax-highlighting10.2 IDE配置同步使用VS Code的Settings Sync功能将配置保存在GitHub Gist。关键设置{ editor.formatOnSave: true, eslint.validate: [javascript, vue], files.autoSave: afterDelay }11. 安全配置要点11.1 SSH安全加固修改/etc/ssh/sshd_configPermitRootLogin no PasswordAuthentication no然后重启服务sudo systemctl restart sshd11.2 依赖安全扫描使用npm audit检查漏洞npm audit npm audit fix对于前端项目可以集成Snyknpm install -g snyk snyk auth snyk test12. 性能优化技巧12.1 前端构建优化配置vue.config.js中的并行构建const { defineConfig } require(vue/cli-service) module.exports defineConfig({ parallel: require(os).cpus().length 1, transpileDependencies: true })12.2 数据库性能PostgreSQL配置优化postgresql.confshared_buffers 4GB effective_cache_size 12GB maintenance_work_mem 1GB13. 团队协作规范13.1 Git工作流采用Git Flow分支模型main - 生产环境代码 develop - 集成测试分支 feature/* - 功能开发分支 release/* - 预发布分支 hotfix/* - 紧急修复分支13.2 代码审查要点制定Code Review清单是否包含敏感信息是否有明显的性能问题是否遵循项目代码风格是否有适当的单元测试14. 监控与日志14.1 应用日志配置使用winston记录结构化日志const winston require(winston); const logger winston.createLogger({ level: info, format: winston.format.json(), transports: [ new winston.transports.File({ filename: error.log, level: error }), new winston.transports.File({ filename: combined.log }) ] });14.2 性能监控安装PM2并配置监控npm install pm2 -g pm2 start server.js pm2 monit15. 备份策略15.1 数据库备份设置PostgreSQL自动备份pg_dump -U postgres -d dbname -f backup.sql可以配置cron任务每天执行0 3 * * * pg_dump -U postgres dbname /backups/dbname_$(date \%Y\%m\%d).sql15.2 代码备份除了Git仓库建议定期打包重要代码tar -czvf code_backup_$(date \%Y\%m\%d).tar.gz /path/to/project16. 本地测试环境16.1 模拟第三方服务使用Mock Service Worker拦截API请求import { setupWorker, rest } from msw const worker setupWorker( rest.get(/api/user, (req, res, ctx) { return res( ctx.json({ id: 1, name: Test User }) ) }) )16.2 测试数据生成使用Faker.js创建测试数据const faker require(faker); const users Array(10).fill().map(() ({ name: faker.name.findName(), email: faker.internet.email() }));17. 跨平台兼容性17.1 处理路径差异使用path模块处理文件路径const path require(path); const filePath path.join(__dirname, data, file.txt);17.2 换行符统一配置Git自动转换换行符git config --global core.autocrlf input18. 环境差异管理18.1 多环境配置使用cross-env设置环境变量npm install cross-env --save-dev然后在package.json中scripts: { dev: cross-env NODE_ENVdevelopment node server.js }18.2 条件化配置根据环境加载不同配置const config require(./config.${process.env.NODE_ENV || development}.json);19. 开发效率提升19.1 代码片段管理配置VS Code用户片段Code → Preferences → User Snippets{ Console log: { prefix: cl, body: [console.log($1, $1);], description: Log output to console } }19.2 自动化脚本编写常用操作的Makefileinstall: npm install start: npm start test: npm test20. 知识沉淀建议20.1 问题记录模板建立标准化的问题记录格式## 问题描述 ## 环境信息 ## 重现步骤 ## 实际结果 ## 预期结果 ## 解决方案20.2 技术决策记录重要技术选择应记录ADRArchitecture Decision Record# 标题 ## 状态 提议/已采纳/已弃用 ## 背景 ## 决策 ## 后果
