├── assets ├── 1.png ├── 2017-12-01_171923.png ├── 2017-12-01_172321.png ├── 2017-12-01_174154.png ├── 2017-12-01_180609.png ├── 2017-12-01_181752.png ├── 1027889-20170720222859974-537752330.png ├── 1027889-20170716140700113-1104261961.png ├── 1027889-20170720222553255-1350255215.png ├── 1027889-20170720224628271-1605895131.png └── 1027889-20170720225403990-2119602044.png ├── SUMMARY.md ├── .gitignore ├── README.md ├── node-huan-jing-pei-zhi.md ├── bu-shu-hello-world.md ├── nginx-an-zhuang-pei-zhi.md ├── mongodbde-an-zhuang-shi-yong.md ├── httpsbu-shu.md └── zi-dong-hua-bu-shu.md /assets/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/essay-org/web-deploy/HEAD/assets/1.png -------------------------------------------------------------------------------- /assets/2017-12-01_171923.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/essay-org/web-deploy/HEAD/assets/2017-12-01_171923.png -------------------------------------------------------------------------------- /assets/2017-12-01_172321.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/essay-org/web-deploy/HEAD/assets/2017-12-01_172321.png -------------------------------------------------------------------------------- /assets/2017-12-01_174154.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/essay-org/web-deploy/HEAD/assets/2017-12-01_174154.png -------------------------------------------------------------------------------- /assets/2017-12-01_180609.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/essay-org/web-deploy/HEAD/assets/2017-12-01_180609.png -------------------------------------------------------------------------------- /assets/2017-12-01_181752.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/essay-org/web-deploy/HEAD/assets/2017-12-01_181752.png -------------------------------------------------------------------------------- /assets/1027889-20170720222859974-537752330.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/essay-org/web-deploy/HEAD/assets/1027889-20170720222859974-537752330.png -------------------------------------------------------------------------------- /assets/1027889-20170716140700113-1104261961.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/essay-org/web-deploy/HEAD/assets/1027889-20170716140700113-1104261961.png -------------------------------------------------------------------------------- /assets/1027889-20170720222553255-1350255215.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/essay-org/web-deploy/HEAD/assets/1027889-20170720222553255-1350255215.png -------------------------------------------------------------------------------- /assets/1027889-20170720224628271-1605895131.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/essay-org/web-deploy/HEAD/assets/1027889-20170720224628271-1605895131.png -------------------------------------------------------------------------------- /assets/1027889-20170720225403990-2119602044.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/essay-org/web-deploy/HEAD/assets/1027889-20170720225403990-2119602044.png -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | # Summary 2 | 3 | * [前端自动化部署](README.md) 4 | * [Node环境配置](node-huan-jing-pei-zhi.md) 5 | * [部署Hello World](bu-shu-hello-world.md) 6 | * [Nginx安装配置](nginx-an-zhuang-pei-zhi.md) 7 | * [MongoDB的安装使用](mongodbde-an-zhuang-shi-yong.md) 8 | * [自动化部署](zi-dong-hua-bu-shu.md) 9 | * [HTTPS部署](httpsbu-shu.md) 10 | 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Node rules: 2 | ## Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 3 | .grunt 4 | 5 | ## Dependency directory 6 | ## Commenting this out is preferred by some people, see 7 | ## https://docs.npmjs.com/misc/faq#should-i-check-my-node_modules-folder-into-git 8 | node_modules 9 | 10 | # Book build output 11 | _book 12 | 13 | # eBook build output 14 | *.epub 15 | *.mobi 16 | *.pdf -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### 项目部署手册 2 | 3 | 目录： 4 | 5 | * [Node环境配置](node-huan-jing-pei-zhi.md) 6 | * [部署Hello World](bu-shu-hello-world.md) 7 | * [Nginx安装配置](nginx-an-zhuang-pei-zhi.md) 8 | * [MongoDB的安装使用](mongodbde-an-zhuang-shi-yong.md) 9 | * [自动化部署](zi-dong-hua-bu-shu.md) 10 | * [HTTPS部署](httpsbu-shu.md) 11 | 12 | 作者：[wmui](https://github.com/wmui) 13 | GitHub: [https://github.com/wmui](https://github.com/wmui) 14 | GitBook: [https://wmui.gitbooks.io/web-deploy/content/](https://wmui.gitbooks.io/web-deploy/content/) 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /node-huan-jing-pei-zhi.md: -------------------------------------------------------------------------------- 1 | #### 服务器购买 2 | 3 | 推荐购买vultr的$5/月的东京服务器，强烈不推荐阿里云服务器。系统选择ubuntu 17.10 64位操作系统，文章中也会以该配置作为演示。 4 | 5 | #### 远程连接工具 6 | 7 | 推荐[mobaxterm](http://mobaxterm.mobatek.net/)，它可以在线编辑你的文件，自带ftp功能，可拖拽上传下载，简单好用 8 | 9 | ![](/assets/2017-12-01_172321.png) 10 | 11 | #### 软件安装 12 | 13 | 系统安装成功后，安装以下常用软件 14 | 15 | `sudo apt-get install vim wget curl git` 16 | 17 | #### Node环境配置 18 | 19 | nvm安装 20 | 21 | `wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash` 22 | 23 | 打开新的窗口 24 | 25 | `nvm install v8.9.1` 26 | 27 | `nvm use 8.9.1` 28 | 29 | `nvm alias default 8.9.1` 30 | 31 | 安装常用node包 32 | 33 | `npm i pm2 webpack vue-cli -g` 34 | 35 | -------------------------------------------------------------------------------- /bu-shu-hello-world.md: -------------------------------------------------------------------------------- 1 | ### 创建和部署hello world {#articleHeader5} 2 | 3 | 以root用户身份在根目录下创建www目录,www目录下创建hello文件夹,里面就一个文件，hello.js,内容如下： 4 | 5 | ```javascript 6 | const http = require('http') 7 | http.createServer(function(req,res) { 8 | res.writeHead(200,{'Content-Type':'text/plain'}) 9 | res.end('hello world') 10 | }).listen(8081) 11 | 12 | console.log('server test') 13 | ``` 14 | 15 | 以上是一个最简单的node服务，服务输出hello world，我要让它在服务器上跑起来，最简单的方法执行`node hello.js`，但是关闭命令后服务就断了，要想不中断可用到pm2管理工具 16 | 17 | pm2的几个常用命令： 18 | 19 | * pm2 start preject 启动项目 20 | 21 | * pm2 list 查看启动的应用 22 | 23 | * pm2 show preject 查看详细信息 24 | 25 | * pm2 logs 查看当前信息 26 | 27 | * pm2 stop preject 停止preject 28 | 29 | * pm2 delete preject 删除preject 30 | 31 | #### 启动服务 32 | 33 | 执行pm2 start hello.js你的服务就跑起来了，此时地址栏输入`http://198.10.10.100:8081`（你自己的服务器IP）就会看到hello world 34 | 35 | 执行pm2 list回看到详细信息 36 | 37 | ![](/assets/2017-12-01_174154.png) 38 | 39 | 在Nginx的安装配置一节会讲述如何配置域名，输入`http://hello.example.com`看到hello world 40 | 41 | -------------------------------------------------------------------------------- /nginx-an-zhuang-pei-zhi.md: -------------------------------------------------------------------------------- 1 | #### Nginx安装 2 | 3 | `sudo apt-get install nginx` 4 | 5 | 通过nginx -v查看版本号 6 | 7 | #### 代理设置 8 | 9 | 打开/etc/nginx/conf.d/文件夹，创建配置文件hello-8081.conf，内容如下： 10 | 11 | ```bash 12 | # 这里是代理端口号 hello和8081根据你的情况配置 13 | upstream hello { 14 | server 127.0.0.1:8081; 15 | } 16 | 17 | server { 18 | listen 80; 19 | # 域名配置 20 | server_name hello.example.com; 21 | 22 | location / { 23 | proxy_set_header Host $http_host; 24 | proxy_set_header X-Real-IP $remote_addr; 25 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 26 | proxy_set_header X-Nginx-proxy true; 27 | # 不要忘记这个模块的配置 28 | proxy_pass http://hello; 29 | proxy_redirect off; 30 | } 31 | } 32 | ``` 33 | 34 | 35 | 36 | 解释：配置文件类型必须以.conf结尾，文件名可自定义，为了方便记忆，遂以项目名加端口号的方式命名。 37 | 38 | 完成配置后，执行`sudo nginx -t`查看是否配置成功 39 | 40 | ![](/assets/2017-12-01_171923.png) 41 | 42 | `sudo service nginx start` 启动服务 43 | `sudo nginx -s reload`重启服务 44 | 45 | 如果启动失败，可能是防火墙导致的，关闭防火墙 46 | 47 | ``` 48 | //临时关闭 49 | service iptables stop 50 | //禁止开机启动 51 | chkconfig iptables off 52 | ``` 53 | 54 | #### 域名解析 55 | 56 | 解析你的域名到你的服务器ip，这样就可以通过访问`hello.example.com`代理服务器的8081端口，Nginx在这里的作用就是让你可以在一台服务器跑多个Node项目。 57 | 58 | -------------------------------------------------------------------------------- /mongodbde-an-zhuang-shi-yong.md: -------------------------------------------------------------------------------- 1 | #### 安装 2 | 3 | [官方文档](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/) 4 | 5 | 按照官方文档ubuntu版本号安装，按顺序执行以下命令： 6 | 7 | * `sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 0C49F3730359A14518585931BC711F9BA15703C6` 8 | 9 | * `echo "deb [ arch=amd64,arm64 ] http://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list` 10 | 11 | * `sudo apt-get update` 12 | 13 | * `sudo apt-get install -y mongodb-org` 14 | 15 | * `sudo service mongod start` 16 | 17 | 完成以上操作，你的服务器已成功安装MongoDB 18 | 19 | 补充一下CentOS的安装方法： 20 | 21 | [官方文档](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-red-hat/) 22 | 23 | 1. 创建仓库文件：/etc/yum.repos.d/mongodb-org-4.0.repo，内容如下 24 | 25 | ```bash 26 | [mongodb-org-4.0] 27 | name=MongoDB Repository 28 | baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.0/x86_64/ 29 | gpgcheck=1 30 | enabled=1 31 | gpgkey=https://www.mongodb.org/static/pgp/server-4.0.asc 32 | ``` 33 | 34 | 2. `sudo yum install -y mongodb-org` 35 | 3. `sudo service mongod start` 36 | 37 | #### 初始数据的备份和导入 38 | 39 | 很多时候我们项目要上线，需要把本地的初始化数据导入到线上 40 | ，步骤如下 41 | 42 | 首先在本地开启你的mongodb，并把数据备份到本地，比如说我要备份vueblog数据库到c:\vueblog-backup文件夹： 43 | 44 | `mongodump -h 127.0.0.1:27017 -d vueblog -o C:\vueblog-backup` 45 | 46 | 备份出来的数据长这样 47 | 48 | ![](/assets/1027889-20170716140700113-1104261961.png) 49 | 50 | 通过ftp工具把数据上传到远程服务器，例如我上传到了/www文件夹下 51 | 52 | 接着在服务器导入数据到vueblog数据库 53 | `mongorestore -h 127.0.0.1:27017 -d vueblog /www/vueblog-backup/vueblog` 54 | 55 | 查看是否导入成功： 56 | 57 | `mongo` 58 | 59 | `use vueblog` 60 | 61 | ![](/assets/2017-12-01_180609.png) 62 | 63 | -------------------------------------------------------------------------------- /httpsbu-shu.md: -------------------------------------------------------------------------------- 1 | #### 申请ssl证书 2 | 3 | 免费申请的机构有很多，我用的是腾讯云的，进入腾讯云官网，云产品的ssl证书管理，可免费申请。 4 | ![](/assets/1027889-20170720222553255-1350255215.png) 5 | 6 | 申请后5分钟左右就会颁发证书，我们下载下来解压后长这样 7 | 8 | ![](/assets/1027889-20170720222859974-537752330.png) 9 | 10 | nginx证书长这样 11 | 12 | 13 | ![](/assets/1027889-20170720225403990-2119602044.png) 14 | 15 | ### DNS解析 16 | 17 | 申请完证书官方有详细的部署教程，这里简单介绍。我们需要做dns解析 18 | ![](/assets/1027889-20170720224628271-1605895131.png) 19 | 20 | ### 服务器部署ssl证书 21 | 22 | 前面我们已经成功安装了nginx，所以以部署nginx服务器的证书为例，首先建立一个ssl文件夹，把nginx证书放进去，然后通过ftp上传到www目录下，接着要配置nginx的配置文件 23 | 24 | ```c 25 | upstream vueblog { 26 | server 127.0.0.1:8080; 27 | } 28 | 29 | server { 30 | listen 80; 31 | # 修改为自己的域名 32 | server_name vueblog.86886.wang; 33 | # 301 重定向 34 | return 301 https://vueblog.86886.wang$request_uri; 35 | } 36 | 37 | server { 38 | listen 443; 39 | server_name vueblog.86886.wang; 40 | ssl on; 41 | # 证书路径不要写错 42 | ssl_certificate /www/ssl/1_vueblog.86886.wang_bundle.crt; 43 | ssl_certificate_key /www/ssl/2_vueblog.86886.wang.key; 44 | ssl_session_timeout 5m; 45 | ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 46 | ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 47 | ssl_prefer_server_ciphers on; 48 | if ($ssl_protocol = "") { 49 | rewrite ^(.*) https://$host$1 permanent; 50 | } 51 | 52 | location / { 53 | proxy_set_header Host $http_host; 54 | proxy_set_header X-Real-IP $remote_addr; 55 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 56 | proxy_set_header X-Nginx-proxy true; 57 | # 这里也要修改为你的二级域名前缀 58 | proxy_pass http://vueblog; 59 | proxy_redirect off; 60 | } 61 | } 62 | ``` 63 | 64 | 把配置文件长传到etc/nginx/conf.d文件夹下，执行\`sudo nginx -s reload\`重启服务器，至此就完成了ssl证书的部署，并拥有301重定向功能 65 | 66 | -------------------------------------------------------------------------------- /zi-dong-hua-bu-shu.md: -------------------------------------------------------------------------------- 1 | #### 本地密钥生成 2 | 3 | 本地环境要和服务器环境基本保持一致，所以本地也要安装好git，node.js，pm2安装方法不在赘述 4 | 5 | 本地git bash执行`ssh-keygen -t rsa`，一路回车，完成后在你的用户目录下会生成一个.ssh文件夹，内容如下： 6 | 7 | ![](/assets/2017-12-01_181752.png) 8 | 9 | 复制id\_rsa.pub中的内容，登录github，在设置选项添加ssh key，这样你就可以本地提交你的代码到github了 10 | 11 | #### 服务器密钥生成 12 | 13 | 服务器同本地一样，也是执行`ssh-keygen -t rsa`，一路回车 14 | 15 | 同样在github添加你的服务器密钥 16 | 17 | 完成以上操作后在服务端执行`echo "[your public key]" > ~/.ssh/authorized_keys`该命令会将本机的公钥拷贝到服务器的authorized\_keys文件，可打开root/.ssh/authorized\_keys，查看是否拷贝成功 18 | 19 | #### 设置文件和目录权限 20 | 21 | 设置authorized\_keys权限:`$ chmod 600 authorized_keys` 22 | 23 | 设置.ssh目录权限:`$ chmod 700 -R .ssh` 24 | 25 | 完成以上操作你的本机就和服务器建立的联系，无需密码就可以操作服务器了，这个权限设置很重要 26 | 27 | #### 项目部署 28 | 29 | 为了更好地说明部署细节，以我的开源项目[VueBlog](https://github.com/wmui/vueblog)作为演示 30 | 31 | 在本地项目目录下执行`pm2 ecosystem`，然后会在根目录下生成一个`ecosystem.config.js`文件 32 | 33 | ```javascript 34 | module.exports = { 35 | apps: [ 36 | { 37 | name: 'vueblog', 38 | script: 'build/main.js', 39 | env: { 40 | COMMON_VARIABLE: 'true' 41 | }, 42 | env_production: { 43 | NODE_ENV: 'production' 44 | } 45 | } 46 | ], 47 | deploy: { 48 | production: { 49 | user: 'root', 50 | // 服务器ip 51 | host: '198.13.32.165', 52 | // 分支 53 | ref: 'origin/master', 54 | // 仓库地址 55 | repo: 'git@github.com:wmui/vueblog.git', 56 | path: '/www/vueblog', 57 | 'post-deploy': 'yarn && npm run build && pm2 reload ecosystem.config.js --env production' 58 | } 59 | } 60 | } 61 | 62 | ``` 63 | 64 | 以上你要根据你自己的项目进行修改，完成修改后，提交到github 65 | 66 | 第一次你先要在你的服务器上clone你的项目，我克隆到了/www目录下，cd到该目录，服务端执行`pm2 deploy ecosystem.config.js production setup`初始化项目 67 | 68 | 紧接着重点来了，打开你的root目录下的.baserc文件，把最底部的以下两行代码移动到最上面，这应该是一个坑 69 | 70 | ``` 71 | export NVM_DIR="$HOME/.nvm" 72 | [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm 73 | ``` 74 | 75 | 然后在本地的git bash中测试，修改一些东西，提交到github，执行`pm2 deploy ecosystem.config.js production`你会看到你下内容，恭喜成功，服务端会自动执行安装启动等操作 76 | 77 | ![](/assets/1.png) 78 | 79 | [pm2](https://github.com/Unitech/pm2)有很多强大的功能，比如我们项目部署到线上后发现有问题，可以执行`pm2 deploy ecosystem.config.js production revert 1`回滚到上一个版本，更多强大功能可查看官方文档 80 | 81 | --------------------------------------------------------------------------------