在线地址git地址一步步搭建一个React应用-打开推荐浏览器开发者工具启用移动设备模式安装环境前提条件:购买ESC,弹性公网ip,域名设置服务器freeSecretlogin本地应该有一个.ssh目录,并生成公私钥,将本地的id_rsa、id_rsa.pubscp到server/.ssh目录下。之所以还要上传私钥,是通过gitclonegit@github.com克隆仓库后,登录服务器cat/root/.ssh/id_rsa.pub>>/root/.ssh/authorized_keys现在您无需密码即可登录服务器。安装ubuntugit:apt-getinstallgitmongodb:apt-getinstallmongodb更改端口,添加认证redis:apt-getinstallredis-servernvmgitclonehttps://github.com/creationix/nvm.git.bashrc文件头添加:source~/nvm/nvm.shnvminstallv8.2.1(安装node指定版本)pm2npminstall-gpm2pm2deploymentnode**pm2提供了一个小而强大的部署功能,拉取git仓库指定分支的代码到我们指定的服务器的指定目录,然后执行指定的脚本**localproject在之前引入的ecosystem.config.js文件中添加deploy:{"production":{user:"root",host:['118.190.208.49'],ref:"origin/master",repo:"git@github.com:xiyuyizhi/movies.git",path:"/root/www/movies_be","post-setup":"ls-la","post-deploy":"cdbe&&npminstall&&pm2kill&&pm2startecosystem.config.js--envproduction","env":{"NODE_ENV":"production"}}}添加"scripts"到package.json:{"start":"pm2startecosystem.config.js","test":"mocha--watch","setup":"pm2deployecosystem.config.jsproductionsetup","deploy":"pm2deployecosystem.config.jsproduction"}在本地npm之后runsetup初始化remote目录,只需要执行一次,之后每次部署只需要执行npmrundeploy,前端webpack构建完成后build目录下的文件可以写一个脚本scp到server,不过这里我们借用pm2的部署功能来部署前端代码。在本地前端目录新建一个ecosystem.config.js文件module.exports={deploy:{"production":{user:"root",host:['118.190.208.49'],ref:"origin/master",repo:"git@github.com:xiyuyizhi/movies.git",路径:"/root/www/movies_fe","post-setup":"ls-la","post-deploy":"cd/root/www/front&&rm-rf*&&cd/root/www/movies_fe/current/fe/build&&cp-r./root/www/front",}}};主要是post-deploy中的脚本:部署服务器目录将下面的前端构建代码复制到nginx访问的指定目录下的nginx相关配置nginxsites-enabled目录下,新建xiyuyizhi.xyz.conf服务器{听8080;server_namexiyuyizhi.xyz;//多个域名共享同一个端口,使用这个server_name转不同的路径root/root/www/front;location/{try_files$uri$uri//index.html;//找不到页面时转到索引页面,解决前端单页历史路由问题}location/api{proxy_passhttp://localhost:8000;//Proxy的后端服务地址}}通过域名直接使用80端口必须先备案,所以这里使用8080端口nginxnginx.conf启用gZip压缩。
