从壹开始先后端分离 41 || Nginx+Github+PM2 快速部署项目(一)

前言

哈喽你们周一好!今天是农历腊月二十三,小年开始,恭祝你们新年快乐(哈哈你五福了么😂)!html

今天呢,是一个很简单的文章,是个人一个我的经验的总结篇,你们只须要看一遍,就会学会的东西,关于其中的原理我就很少说了,直接进入正题,打算写要给小专题,所有用来写集成部署相关的内容,具体的尚未肯定,预计会有四~六篇。前端

言归正传,咱们开发每个项目的时候,可能都会经历不一样的阶段,不管是后端C#,控制台,仍是前端Node,标签语言,可是都会经历最后一个相同的步骤——最后的部署,这个步骤老是让人很头疼,咱们的QQ群里的小伙伴,也是常常会在发布的时候,遇到这样或那样的问题,就好比:vue

一、Nuxt如何进行 SPA/SSR 部署?node

二、.Net Core解耦了之后,发布的时候Publish文件夹里老是会缺乏文件?react

三、每次都须要拷贝文件到服务器,还得先停掉IIS,好麻烦。nginx

四、若是服务器部署Vue、Nuxt、NetCore等多个项目,想找各自所在的文件夹和端口号,都须要好久!git

五、是否考虑过 Jenkins 集成?github

这仅仅是开发部署中的一些常见小问题,可是每个问题,都会让人不那么舒服,因此我就想,怎样能够既不用拷贝,又能够不依赖IIS,并且还同时适用多种项目呢,这就是今天要说的,我如今都是采用的这个方法,Github+Nginx+PM2来部署各类项目,不只仅是.Net Core 项目,还有 Vue 、React(目前自学react,到时候开源一个系列)、Nuxt.js 的部署,都是采用的这个方法,上个人Nginx 部分配置代码(之后文章会有集成部署+进程管理+SSL)这就是我开源的三个项目的部分配置(http://123.206.33.109:7090http://123.206.33.109:8077http://123.206.33.109:8081):web

 # 代理 .net core,项目端口和监听端口一致
    upstream dotnetblogserver1 {
            server 127.0.0.1:8081;
    }
    server {
       listen   8081;
       server_name localhost;
        location /{
            proxy_pass   http://dotnetblogserver1;
            index  index.html index.htm;
        }

    }

    # 代理 Nuxt.js ,项目端口和监听端口不一致
    upstream nuxtserver1 {
            server 127.0.0.1:3089;
    }
    server {
       listen   7090;
       server_name localhost;
        location /{
            proxy_pass   http://nuxtserver1;
            index  index.html index.htm;
        }

    }

    # 代理 Vue(SPA),监听静态文件夹
    server {
        listen       8077;
        server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
        location /api {
            rewrite  ^.+apb/?(.*)$ /$1 break;
               include  uwsgi_params;
            proxy_pass   http://123.206.33.109:8081; 
        }

    }

 

好啦,快速开始今天的说明。docker

 

 

1、.Net Core传统的部署方法 

如今咱们平时部署项目都是怎么部署的呢,这里先不说 Vue 和 Nuxt,先用 .NetCore 举例:

一、发布项目而后上传到 IIS

这个方法应该是咱们平时最经常使用,也是从咱们一开始开发的时候,就耳濡目染,言传身教的经典方法,自从咱们开发.net 的时候,就是这么作的,一直到了如今 .net core,很简单的经典三部曲:

一、服务器开启 IIS 服务;

二、Publish 咱们的整个项目;

三、拷贝到服务器,而后新建一个 IIS 站点,噼里啪啦一顿设置,就能够访问了;

由于咱们的 IIS 自己就拥有代理的做用,因此这个时候,咱们就能够直接经过 IP地址 : 端口号 的形式,来访问咱们的项目。至于之后的配置域名,搭建 SSL 安全证书访问等,就是后话了。  

若是你也比较习惯和看好这个,能够看我以前的一篇文章:《框架之十三 || 项目部署Windows+Linux完整版》,这个就是这么部署的。

 

不过这个时候我就想到了两个问题,要问问你们:

一、相信每个开发 .Net Core 的小伙伴都知道,咱们的 Core 和 .net 仍是不同的,其中一个很大的变更,就是咱们的 core 版本,已经内置了应用程序服务器配置——Kestrel 了,若是你如今对这 Kestrel 还不是很了解,甚至还不知道有这么个东西存在的话,那但是不及格的,可要好好的再从新学习下了,相信从一开始跟着老张学习的,必定都是知道的。既然内置了服务器,咱们可不能够不使用 IIS 呢?

二、咱们在 IIS 中部署 Core 项目的时候,为何要把 .Net CLR 版本设置为 “无托管代码” 模式?这个你们考虑过么。

上边的这两个问题,请你们本身先想一想,查查资料,固然,若是你都懂,请继续往下看。

 

二、在 VS2017 中WEB远程部署

 上边的经典三部曲发布模式,使用特别普遍,几乎每个.net 从业者都这么玩儿过,不过其中仍是有一些问题,好比:必需要本地发布,而后拷贝到远程,或者经过FTP上传到远程服务器等等操做,那这个时候我就想,既然服务器是联网的,那咱们为何不经过网络发布呢,为何必定要手动拷贝呢?欸,没错,VS确实能够直接web远程部署,聪明的你不知道有没有用过这个方法,在VS中进行远程发布:

 

这里要说下,若是你是单纯的想文件发布,可使用FTP模式,我习惯使用 WEB 部署,这样的话,直接是针对咱们的 IIS 站点部署,若是你使用 FTP ,还须要对当前站点进行 ftp 服务的配置。
若是是第一次使用web部署,可能会报错:

这个很简单,只须要在服务器中安装 web deploy 便可,你们本身实施便可:

这里提供一个安装Web Deploy的方法,经过Microsoft Web Platform Installer来安装。在Web Platform Installer(Web平台安装程序)上点击“产品”,接着点击“服务器”,安装IIS:管理服务和Web Deploy 3.5(其余版本没有测试,可能配置不同)。

这里就不作过多的讲解了,由于这个不是今天的主要内容,之前我是常用这个方法,很简单的部署到服务器上的指点站点。可是咱们虽然减小了拷贝的问题,但是最重要的一个问题仍是没有解决:就是太依赖 IIS 这个服务器容器了,包括一些配置,可见仍是有一些局限性的。好比咱们在 Linux 服务器进行发布,确定就不能使用 IIS 了吧,而后上边的两个方法也就瞬间崩盘了,那怎么办呢?这里有两个方案:

一、Docker 容器部署;

二、自带的应用程序服务器Kestrel服务器部署;

相信确定有一部分大佬已经使用了第一种办法 —— Docker 容器镜像部署,不过我我的尚未使用过,那具体怎么用呢? 

 

三、Docker 容器部署

说实话,这个方法我如今尚未用过,不过我研究过流程,过程仍是稍微复杂一些,只是公司电脑不让添加 Docker 的共享文件夹(玩儿过的应该知道),我这里就简单说下流程吧,之后我会在 Docker 专题里,更详细的说这个,这里先留一个坑

一、编写Dockerfile;

须要在咱们项目的根路径下,建立一个 dockerfile 文件,对项目进行配置。

 

二、服务器安装 Docker 容器

这个我尝试过,过程仍是比较复杂的,安装成功后,而后开启服务。

三、生成镜像,启动实例

这个就是咱们很熟悉的,将咱们的项目文件拷贝到服务器,而后启动 Docker 镜像实例,就能够开启服务了,运行咱们的项目了。

四、Nginx 端口代理

最后一步,固然仍是要进行代理,这样才能让外网能够访问咱们的项目。

 

具体的过程网上有不少资料,我这里就先很少说了,我要说的是,相对于以前的两个办法, Docker 解决了一个大问题,就是跨平台的问题,彻底摆脱了 IIS 的束缚,可是对于初学者,老是有一些望而却步,好比安装 Docker 就是一个不少坑的过程。

那有没有一种办法,既能够很快的把代码发布到服务器,并且也方便之后维护,又能够减小手动拷贝文件的须要,而后还能够摆脱 IIS 的依赖,最后能够不用 Docker 那么复杂容器的配置呢?我如今就说下我本身的经验吧,可能你看着还不如上边三种方法,不要紧,提供一个思路,共同探讨!那具体怎么作呢,请往下看。 

 

2、Nginx+Github部署新方法

一、服务器安装 Github Desktop,获取项目代码

上边我们说到了一个问题,就是如何避免手动拷贝的问题,固然你也可使用上边的第二个方法,使用 vs 的远程部署,不过这种方法仍是依赖了 IIS (由于须要站点名),因此我更习惯用 Github 来作代码的管理,若是你惧怕公司代码不安全,可使用 SVN 提交到服务器,也是同样的,SVN就不说了,本文只说Github。

经常使用 Git 管理工具备两种方式:

一、Git Bash 命令行管理,这个我使用了有两年,下载地址:https://www.git-scm.com/downloads

二、Github Desktop桌面客户端,如今我使用这个居多,下载地址:https://desktop.github.com

如今咱们就在服务器上,安装Github桌面客户端,而后把仓库下载到本地,这个过程就不说了,很简单,自行研究便可。最后咱们就看到了服务器上咱们的 Blog.Core 的代码了:

 

请注意:咱们平时开发的时候,提交到Github上,记得要进行筛选,不要把那些没必要要的问题都提交上去,我也是常常看有些小伙伴,把各类的dll呀,bin文件夹呀,obj文件夹呀,通通提交上去了,致使仓库有十几M,甚至几十M,这让别人下载的时候,会很麻烦,你们能够看看个人仓库,只有 416 K:

 

如今咱们服务器上有了源码,剩下的就是启动服务了。

 

二、编译并启动 kestrel 服务器

上边咱们已经把咱们的源代码下载下来了,如何启动呢,很简单,直接执行 dotnet 命令行:

1、dotnet build //这个是在项目的根目录下

2、cd blog.core //进入webapi可执行项目中

3、dotnet run // 运行咱们的webapi

这里说下:若是你是在本地开发,不想一直F5,又不想打包发布IIS,能够直接这么操做,只不过run的时候,可使用 dotnet watch run 监控式运行,这样当咱们在 vs 中编辑后,而后保存一下,就能实时的看到效果了,这个很像 webstore开发vue的时候的功能——保存即更新。

 

是否是很简单,动图以下:

 

到这里,咱们的第一步已经完成了,是否是比IIS更方便,咱们之后再提交的时候,只须要先从 Github Desktop上,拉取有更新的代码,而后再执行这两个命令,便可。项目已经成功的启动,你能够在服务器的浏览器中,尝试的访问下 http://localhost:8081 ,确定是有结果的,先不要太开心,由于如今咱们仅仅是把本地服务给启动了,外网如今仍是没法访问的,那怎么办呢,这个时候,就须要咱们的 Nginx 代理了。

 

三、安装 Nginx 代理服务器

关于如何安装 Nginx ,这里就很少说了,由于以前我已经讲过,详细的能够查看个人这篇文章的第二节内容《基于Nginx 的反向代理——打包发布》 。

安装成功后,启动 nginx 服务:

 

四、配置 config 端口监听

 如今就是万事俱备,只欠东风了——配置端口监听代理:

在 \nginx-1.14.0\conf 下的 nginx.conf 文件中,增长配置:

 

保存配置文件,并重启nginx服务,这个时候,咱们就能够在外网轻松访问了 http://123.206.33.109:8081:

 

注意、若是你不想把代码公开,可使用Github 私有库,固然楼下有小伙伴说用SVN也挺好

 

整个流程就这么解决了,这个时候你们能够想想,是否是很方便:

一、使用 Github ,保证文件确定不会缺斤少两,由于只要本地没问题,提交到仓库后,在服务器里拉取,就没问题。

二、启动方便,每次修改,只须要 git pull,而后dotnet build,而后dotnet run便可。

三、摆脱 IIS 的依赖,使用自带的 Kestrel 应用程序服务器(为跨平台作准备)。

四、自定义 Nginx 代理。

 

那是否是这个办法只能适用于 .net core 呢,固然不是的, nuxt.js 也照样能够驾轻就熟,请往下看。

 

3、同理部署 Nuxt.js 服务端渲染

一、Github 拉取代码

 仍是和上边的方法同样,在服务器的 Github Desktop客户端中,拉取咱们的 nuxt 项目,注意千万不要把 node_modules 文件夹给提交上去了(这个就是我服务器上的四个项目,都是这么部署的):

 

二、开启服务,运行项目

关于 nuxt.js 的部署,有两种方式,第一个是 SPA 单页面应用,第二个是 SSR 服务器渲染,SPA特别简单,生成静态文件夹,直接部署便可,就像vue同样,今天只说下 SSR 渲染:

在官网中:官网地址,已经说的很清楚了,只须要两个命令:

nuxt build //先编译,若是你服务器只安装了 npm,而没有安装 nuxt,能够直接使用 npm run build
nuxt start //再启动,可使用 npm run start

你这个时候,是否是感受很熟悉?!没错,几乎和咱们的 dotnet 的部署命令是同样的,先编译,而后启动服务。

 

这个时候,咱们就能够在本地访问 http://localhost:3089 端口了,能够正常的看到效果,之后若是我们更新本地代码,依然能够直接用很简单的方法,轻松搞定:

一、git pull

二、npm run build // 我没梯子,就用的是 cnpm

三、npme run start

这个时候,仍是到了最后一步,就是进行 nginx 代理,供外网访问了.

 

三、Nginx 端口代理

不过这里我们换个端口,好比我不想让别人看到个人服务器的本地 3089 端口,我就想用 7090 端口代理,没问题! 

 

就是这么简单,添加好后,重启 nginx 服务,就能看到效果了:

 

呼!大功告成,咱们的 nuxt 项目已经成功倍nginx所代理,这个时候咱们之后就很简单的部署项目了,你们有没有感受方便了些,不过,别慌,问题还远远没有结束🤨

 

4、结语 

 今天原本想写一大篇的,可是发现篇幅可能有点儿长,索性就来两篇吧,今天主要说明了我是如何在平时开发中快速部署项目的,不知道兄台看事后有何高见,虽然看似结束了,可是依然存在着其余的问题:

一、Linux服务器要如何进行 GitHub 拉取源代码呢?!

二、若是咱们的.net core 项目多的话,每个都须要开启一个 CMD 命令窗体,几十个黑窗口,会不会太浮夸?!

三、若是咱们服务器意外重启了,特别是半夜,而来不及启动,岂不是要很方?!

四、用了 Ngxin 如何进行SSL呢?

不知道聪明的你有没有思考这些问题,好啦,欲知下文,且听下回分解。

-------------------------------------------------------------------------------------------------------------------------------

最后一个花花卡,祝你们新年快乐😂

 

 

5、Github && Gitee

 

https://github.com/anjoy8/Blog.Core

https://gitee.com/laozhangIsPhi/Blog.Core

 

-- ♥ -- ♥ -- ♥ -- ♥ -- ♥ -- ♥ --