在Azure的WebApps上使用Node.js+Express

我尝试将Express应用程序通过”git push”部署到在Azure上创建的WebApps实例。

请参照以下资料进行翻译。

Node.js 开发者中心
在 Windows Azure 上运行 Node.js

前提 (Qian2 ti2)

在Windows环境中已经安装了Node.js、Git、Yoeman,并且将使用以下版本。另外,npm也已经升级完成。

C:\>node -v
v4.4.7

c:\>git --version
git version 2.9.2.windows.1

c:\>yo --version
1.8.4

c:\>npm -v
3.10.6

相关网站

在Azure中免费创建WebApps实例的方法,请参考Azure免费试用期结束后使用免费选项-第2部分。

将Azure WebApp的部署源设置为本地Git,并在我的个人电脑上创建一个克隆版本。

image
image
image
image
image

由于存储库是空的,因此将显示如下。

c:\dev\azure>git clone https://mydeployuser01@tworks55-nodejs.scm.azurewebsites.net:443/tworks55-nodejs.git
Cloning into 'tworks55-nodejs'...
warning: You appear to have cloned an empty repository.
Checking connectivity... done.

去Azure那边确认里面的内容。
进入调试控制台,查看wwwroot文件夹内的内容,只有一个HTML文件。
※可以通过https://[WebAppsName].scm.azurewebsites.net/DebugConsole进入调试控制台。

D:\home\site\wwwroot>dir
 Volume in drive D is Windows
 Volume Serial Number is 4615-9423

 Directory of D:\home\site\wwwroot

08/14/2016  02:41 PM    <DIR>          .
08/14/2016  02:41 PM    <DIR>          ..
08/14/2016  02:41 PM           202,392 hostingstart.html
               1 File(s)        202,392 bytes
               2 Dir(s)   1,071,312,896 bytes free

3. 安装 Yeoman 的 Express 生成器

安装Yeoman的Express生成器。

c:\dev\azure\tworks55-nodejs>npm install -g generator-express

4. 生成和部署Express应用程序

创建一个Exress应用程序

我們移動到從 Azure 的 git 中 clone 下來的文件夾,然後使用 “yo express” 命令進行各種設定。

c:\dev\azure\tworks55-nodejs>yo express
? ==========================================================================
We're constantly looking for ways to make yo better!
May we anonymously report usage statistics to improve the tool over time?
More info: https://github.com/yeoman/insight & http://yeoman.io
========================================================================== No
? Would you like to create a new directory for your project? No
? Select a version to install: MVC
? Select a view engine to use: Jade
? Select a css preprocessor to use (Sass Requires Ruby): None
? Select a database to use: None
? Select a build tool to use: Grunt

(2)在本地环境中进行操作确认

image

下面是命令执行的结果。Express需要按下CTRL+C来停止。

c:\dev\azure\tworks55-nodejs>npm start

> tworks55-nodejs@0.0.1 start c:\dev\azure\tworks55-nodejs
> node app.js

Express server listening on port 3000
GET / 304 1187.621 ms - -
GET /css/style.css 200 14.904 ms - 110

(3) 将代码从git推送到远程仓库。

使用以下命令将文件提交到git,并推送到Azure的git存储库。
c:\dev\azure\tworks55-nodejs>git add

c:\dev\azure\tworks55-nodejs>git commit -m "express deploy"
[master (root-commit) bec7ea6] express deploy
 Committer: E S <E S>
(中略)
 create mode 100644 config/express.js
 create mode 100644 package.json
 create mode 100644 public/css/style.css```
c:\dev\azure\tworks55-nodejs>git push
Counting objects: 24, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (19/19), done.
Writing objects: 100% (24/24), 4.02 KiB | 0 bytes/s, done.
Total 24 (delta 0), reused 0 (delta 0)

(中略)

remote:
remote: Finished successfully.
remote: Running post deployment command(s)...
remote: Deployment successful.
To https:(省略)
 * \[new branch\]      master -> master
image

确认Azure的设置。

当你进入调试控制台并检查wwwroot文件夹时,可以看到最初存在的hostingstart.html文件已经消失了,取而代之的是一个名为web.config的文件,该文件是由我自己的电脑推送过来的,除此之外没有其他文件。

D:\home\site\wwwroot>dir
 Volume in drive D is Windows
 Volume Serial Number is 4615-9423

 Directory of D:\home\site\wwwroot

08/14/2016  03:10 PM    <DIR>          .
08/14/2016  03:10 PM    <DIR>          ..
08/14/2016  03:10 PM    <DIR>          app
08/14/2016  03:10 PM    <DIR>          config
08/14/2016  03:11 PM    <DIR>          node_modules
08/14/2016  03:10 PM    <DIR>          public
08/14/2016  03:10 PM                67 .bowerrc
08/14/2016  03:10 PM               183 .editorconfig
08/14/2016  03:10 PM                45 .gitignore
08/14/2016  03:10 PM               263 app.js
08/14/2016  03:10 PM               132 bower.json
08/14/2016  03:10 PM             1,787 Gruntfile.js
08/14/2016  03:10 PM               626 package.json
08/14/2016  03:11 PM             2,560 web.config
               8 File(s)          5,663 bytes
               6 Dir(s)   1,062,416,384 bytes free

查看web.config文件,您会发现以下设置,其中包含自动配置的node.js运行设置。

<?xml version="1.0" encoding="utf-8"?>
<!--
     This configuration file is required if iisnode is used to run node processes behind
     IIS or IIS Express.  For more information, visit:

     https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->

<configuration>
  <system.webServer>
    <!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
    <webSocket enabled="false" />
    <handlers>
      <!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
      <add name="iisnode" path="app.js" verb="*" modules="iisnode"/>
    </handlers>
    <rewrite>
      <rules>
        <!-- Do not interfere with requests for node-inspector debugging -->
        <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="^app.js\/debug[\/]?" />
        </rule>

        <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
        <rule name="StaticContent">
          <action type="Rewrite" url="public{REQUEST_URI}"/>
        </rule>

        <!-- All other URLs are mapped to the node.js site entry point -->
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
          </conditions>
          <action type="Rewrite" url="app.js"/>
        </rule>
      </rules>
    </rewrite>

    <!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin"/>
        </hiddenSegments>
      </requestFiltering>
    </security>

    <!-- Make sure error responses are left untouched -->
    <httpErrors existingResponse="PassThrough" />

    <!--
      You can control how Node is hosted within IIS using the following options:
        * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
        * node_env: will be propagated to node as NODE_ENV environment variable
        * debuggingEnabled - controls whether the built-in debugger is enabled

      See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
    -->
    <!--<iisnode watchedFiles="web.config;*.js"/>-->
  </system.webServer>
</configuration>

暂时,我觉得在git push时可能会放置一些多余的文件,但是现在我们可以搭建一个运行express的环境了。
虽然对于IIS的设置还有一些问题不清楚,但是我打算暂时就到这里吧。

bannerAds