マイクロソフトAzure

私は偉大なソフトウェアに甘やかされている.私は私のお気に入りのプラットフォームを選択し、開発者の提唱者やインディーアプリ開発者としての私の役割でそれらに展開の贅沢を持っているので、本当に台無しに.私は、これまたはその技術を公開するために速く展開されるかわいいデモをつくるのに慣れました.これを行うには、私は本当に、本当に良いソフトウェアプラットフォームですが、私の多くはvery cute apps 決して生産分布の近くにそれを作る.

Disclosure, I'm now a Microsoft employee. Apparently it's time to get serious.

私は最初にパースに甘やかされて、私のウェブとモバイルバックエンドのためにそのデータベースと甘いプッシュ通知サービスを使用した小さなアプリケーションの束を発表しました.その後、パースの公式サービスはFacebookに買収された後、2017年に閉鎖された.

忘れられたシーンを引き起こした後、私はFirebaseに移動しました.それは本当にリアルタイムデータベース更新、プッシュ通知、および解析のための次の最高のものだった.結局、それはMLキットの出現で本当にクールな機械学習統合を含めさえしました.そして、ローと見よ、FireBaseはホスティングウェブを提供!それはよかった!私は、両方の甘いMBAAs *とサイトホスティングとして使用することができます.
キャンディストアチョコレート工場の子供のように、開発者は、しばしば彼らの小規模なアプリのためにこれらの美しく設計されたプラットフォームに引き付けられている限り、彼らは費用対効果の高い、ショーケース、そしてプロジェクトを取得し、できるだけ早く実行することができます限り.

しかし、いくつかの時点で、あなたの小規模から中規模の個人的なプロジェクトからスケールアップする必要があります.あなたがあなたのプロジェクトが資源のような素晴らしいプラットホームによって提供される資源または特徴を越えて成長する環境で働いているならば、どうですか?このシリーズのチュートリアルでは、マイクロソフトの堅牢で、エンタープライズフレンドリーなクラウド・サービス、AzureにWebプロジェクトを展開する方法について話します.将来のチュートリアルでは、データベースとより多くを加えることによってそれを拡大する方法をあなたに示します.それで始めましょう.

🍬🍫🍭 If you'd like to learn about Azure, take a look at its myriad offerings 🍬🍫🍭

この記事では、私はVueを設定する最も簡単な方法をあなたを歩くつもりです.私たちのような甘やかされた人々が無駄にする時間がないので、JS CLIはGithubを通して連続的な統合でAzureの上でウェブアプリを構築しました.
注意、Azureの静的サイトをホストする方法についてのたくさんの素晴らしいチュートリアルがありますthis one . これはazureストレージ内の静的サイトファイルを投稿することです.私は実際に静的サイトをホストしていないむしろ私はVueのCLIを使用してVueのアプリを構築し、Githubにそれをプッシュし、Githubに変更をプッシュするたびにビルドプロセスによって拾われる.
理想的には、AzureスタイルのWebホスティングはFireBaseスタイルのWebホスティングのようにローカルに構築し、コンテンツをアップロードして展開するFireBaseのCLIを使用しているように見えるでしょう.そして、変更が自動的にGiTubから引き寄せられ、構築され、展開されるVueアプリのためのNetLifyの超簡単な連続展開のようになります.一旦ウェブホスティングが世話されるならば、私は後で私がAzureのポートフォリオの他のツールで強化することができるウェブサイトを更新するためにきれいなプロセスを持っています.

ステップ1：Azureアカウントを作成します

テストの目的のために取得し、あなたの新しいWebアプリで実行するには、無料のアカウントを作成することができますsigning up for Azure .

一旦Azureにサインアップしたら、Azureポータルを見つけます.これは、アプリケーションの作成、展開、およびMLとデータベース管理のような追加の実装を管理する場所です.また、AzureのCLIを介して、またはこのアプリの多くを行うことができますVSコードアプリケーションの拡張子(後述)が、ポータルを使用すると、視覚的に、あなたのアプリのトラックを維持することができますし、私は役に立つことを見つける.

Helpful tip: as you create assets in the Azure portal, pin them to your personal dashboard by clicking the pushpin icon on the top right. They'll be easier to find later.

ステップ2：あなたのVueをビルドします。アプリケーションと構成対コード

Vueを作成する絶対的な最も簡単な方法.JSアプリは、VUI UIを使用するには、GUIのCLIプロセスを視覚化することができます.一度あなたがVue CLI インストールして、端末とタイプを開きますvue ui この栄光を目撃する

新しいVueのCLIを構築されたアプリケーションの作成プロセスを歩いて、Visual Studioのコード、または任意のエディタでの作業を開始することができます基本的なWebアプリケーションを足場になります.しかし、Azureで働くように、あなたの人生をより簡単にする驚くべきAzure拡張があるので、私はVSコードを推薦します.これらの拡張モジュールがインストールされていない場合は、そうすることをお勧めします.それらの束があります:コマンドパレットと検索を開きますAzure VSコード市場で.

少なくとも、Azureアカウント、AzureツールとAzureアプリサービス拡張をインストールしてください.一旦これらがインストールされるならば、あなたはエディタによって促されるとき、あなたのAzure口座にVsコードからログインすることができなければなりません.完了したら、あなたはAzureであなたのチームのために作成された様々な要素にアクセスすることができますそれらを見るために、あなたはVSコードサイドバーのAzureロゴをクリックすることができます.これらはあなたの進歩として便利に来ることができます.

ステップ3：配備の準備をする

今、あなたはGitTubからの展開と継続的な統合のための赤ちゃんのWebアプリを準備する必要があります.Vueアプリは通常ビルドディレクトリから展開されます/dist フォルダ.ビルドVueアプリローカルnpm run build またはVue UIでタスクを実行します.
次に、あなたのアプリケーションのことを確認します.Gitignoreファイルは、新しく作成されたdist フォルダ:削除.Gitignoreの参考文献/dist . 先に行くとgithubレポにあなたのコードベースを押してください.
そして、portal of Azure そして、あなたのアプリケーションの環境を作成し始める.

Note: you will need a Subscription and a Resource Group for your apps. You might need to create a new Resource Group in the portal before you create your new web app.

ポータルの左上に「リソースを作成」をクリックします

中パネルでWebアプリケーションをクリックする

「基本」タブで、Webアプリケーションを追加する購読とリソースグループを選択します.完全に新しいアカウントの場合は、おそらくポータル内でこれらを作成する必要があります.

あなたのウェブアプリに名前を与えてください

コードで公開する

実行時スタックドロップダウンのノードの好みのバージョンを選択します.

プラットフォームで' Windows 'を選ぶ(これは重要なのは、デフォルトのドキュメントを設定するためにIISが使用する設定ファイルを作成するからです).

あなたの近くのリソースの場所を選択します

次に、構成を保存し、アプリケーションを展開します.AzureはWebサイトを作成するazurewebsites.net タブでアクセスできます.コードに接続せずに、次のようになります.

Tip: you can save this resource to your dashboard; it's a good idea to do so as it's really easy to get lost in Azure.

ステップ4：あなたのコードベースにAzureアプリを接続してください

さて、あなたはCodeBaseを見つけるためにAzureに伝える必要があります.以来、あなたの赤ちゃんのVueアプリはGitHub、ポータルの展開センターのタブに頭を安全になっているので、' Github 'をクリックします.

Note, you need to connect GitHub to your Azure account

をクリックし、[アプリケーションサービスビルドサービス]を選択します.これは、コードをビルドして展開するエンジンです.

をクリックして再度続行し、あなたのアプリケーションを接続するGithubの適切な領域を選択します.すべてが一致すると、[完了]をクリックして最初の展開を実行します.

何が起こっているか見るために走る間、あなたはログをチェックすることができます.問題があるならば、これは役に立ちます.ビルドプロセスが期待通りに機能していることも確認できます.

あなたが現在あなたのウェブサイトを訪問していたならば、残念なことに、あなたはそれがエラーをスローするのを見ます.ログを一目見ると、何が間違っているかを示します.

「行方不明のserver . js/app . jsファイル、web . configは生成されません」ということに注意してください.それは、我々がウェブを加える必要がある我々の手掛かりです.インデックスを探す場所を表示するには、アプリケーションのルートに設定ファイル.HTMLのヒントdist/index.html , を参照してください.
この時点であなたがしなければならないのはweb.config ファイルを次のように設定します.

<?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>
    <webSocket enabled="false" />
    <rewrite>
      <rules>
        <!-- First we consider whether the incoming URL matches a physical file in the /dist folder -->
        <rule name="StaticContent">
          <action type="Rewrite" url="dist{REQUEST_URI}"/>
        </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" />
  </system.webServer>
</configuration>

どのように我々はWindows上で実行するには、ホスティングを設定覚えていますか?Windowsを使用してIISNodeをルーティングするときにIISを開き、このファイルはIISにデフォルトのインデックスを見つけるように指示します.HTMLページ.ドロップこのウェブ.あなたのアプリケーションのルートのconfigファイルをgithubにプッシュします.アプリケーションを再構築し、自動的に再展開する必要があります.そして、すべてがうまくいけば、美しいVueを持つことになります.Azurewebsiteの上のJSスターターウェブサイト.ネットドメイン!

次のチュートリアルでは、私が取り組んでいるウェブサイトを構築し、データベースを追加します.スポイラー警告、それはAzureカクテルと呼ばれています、データは私のMr .ボストンカクテルデータセットによって駆動されます.
そして、私の最初のトリックのために、私は新しいウェブアプリ(Azureカクテル)に力を与えるために、私のMr .ボストンカクテルデータセットを使用します.唯一のブルーカクテルを搭載.だって.pic.twitter.com/OOj3Ebzax9 — VXジェン・ルーパー
)
ステイ!
* Parse オープンソース、コミュニティベースのプロジェクト、およびそれに多くの電力としての生活!
* mbaasは「サービスとしてのモバイルバックエンド」を意味します.

Useful Links:
🕴Azure Portal
🔌Azure Extensions for VS Code
💚Getting Started with Vue.js
🎨The Vue CLI with its UI