我用 node.js 和 react 做了一个小应用。之前写过一些小应用,都是写好直接就用 PM2 跑起来了。这次第一次用了 babel 和 webpack 这些工具,现在对如何部署完全没有头绪,希望能得到指点。
我在本地的项目包里有 src
、lib
和 node_module
3个文件夹。我写的代码都在 src
里。lib
是 babel 的输出文件夹,这里的应该是实际运行的文件吧。
React 用到了 webpack、webpack-dev-server 和 react-hot-reload。前端的静态文件都是 webpack-dev-server 提供的。webpack 输出一个 app.js(硬盘里没有),在 HTML 里引用。其他 .js 和 .css 文件手动写在 HTML 里,从 webpack-dev-server 地址引用。
本地运行时是用 nodemon 启动和监控的。我的服务器上有 Nginx,之前跑着一个 node.js app,用 pm2 启动和监控。我知道怎么配置 Nginx 和怎么用 pm2,只是之前我都是直接写代码直接运行的,不涉及 babel 和 webpack,也没有加入 React。
问题 1:我是应该把整个项目文件夹放上服务器,还是只把 lib 文件夹放上去?最笨的办法是不是可以在本地全部调试好之后,直接把 lib 当作完整项目内容放上去,像普通 app 一样运行?
问题 2:怎么处理 HTML 中的静态文件,需要手动把 HTML 里的 src 改成本地或者 CDN 地址?
问题 3:我看到有说要在 Express 里通过 configure 设置不同环境,这个的作用和思路是什么呢?是否必要步骤?
问题 4:上传到服务器之后我还需要继续开发,以前我就是通过 FTP 直接在线编辑文件和更新(FileZilla 自动上传)。不太清楚是否还可以这样做。也就是说现在上传到服务器上其实还是需要开发环境。
问题 5:怎么理解开发环境和生产环境的切换?这是一个物理动作,比如要换到不同的服务器、修改一些文件之类,还是只需要设置某一两个参数完成的?
不好意思,问题比较散而且基础。我希望最好能有一个思路和工作方式的介绍,我需要了解这些工具是如何作用的,不然只是看示例代码甚至 step-by-step 也没太大作用。
@eyblog 能不能详细说明下思路呢?我对 Git 的了解和使用仅限于最基本的 commit、push、fetch。。。操作我可以去研究,现在主要缺少对思路的了解,对这些概念都只有模糊的认识,需要一个纲领性的指导。
问题1:整个放上去吧,只是多花点存储,没其他坏处。你只跑 lib 里面的就好了。如果要在线调试的话,这样还比较方便,免得转换出来的代码是乱七八糟的。
问题2:这些静态文件本来是以什么形式存在的?
问题3:忽悠使用 configure 的方式区分坏境。把所有开发环境与生产坏境不一样的地方,都放在两个不同的 config.js 里面。然后通过设置坏境变量,比如叫这个名字 MY_APP_DEBUG,的方式,通过一个变量来区分线上线下。或者采用 1L 的方案。开发坏境放在 master 分支,线上环境放在 online 分支。每次在 master 上面开发,然后用 online 去 rebase。
问题4:用 ssh 连上去,然后 vim 开发。如果开发量比较大,还需要保存修改记录的话(一般在服务器上我们不弄版本控制,所以改了哪些代码无法知道),就弄个部署脚本,在本地开发后,每次一运行部署脚本,就自动打包、上传、重启。
问题5:同问题3
@alsotang 静态文件就是普通的静态文件啦,放在 /src/public
下相应的文件夹里(css、js、image),在本地时因为懒得处理静态文件,我都通过 webpack-dev-server 提供的地址引用。
我可不可以这样理解,对于实际运行来说,lib
文件夹里的就是最终实际在跑的代码,外面的所有的,包括 babel、webpack 这些工具都只是用来生成(打包)最终要运行的那些文件。lib
就相当于我不用任何工具,纯手写的一个完整应用(正常该怎么用就怎么用,比如直接用 pm2 维护)。那些工具之类的在应用跑起来之后就不用再管了。
如果你是 *nix 系统,用 shell script 去做自动化就好了。webpack 这些没用过,应该会有相应的 grunt 或者 gulp 脚本可以自动生成吧? 新建一个 publish.sh
rm -rf /tmp/release
mkdir /tmp/release
gulp initial script style
cp -R {a,b,c} /tmp/release/
rsync -vrcz --progress -ssh --delete /tmp/release [email protected]:/path/to/app/root
ssh [email protected] 'pm2 restart APPID'
做好证书登录,发布时全自动执行,上传只传差异部份。速度杠杠的。