응석받이로 자란 Microsoft Azure

나는 아주 좋은 소프트웨어의 총애를 받아 망가졌다.정말 총애를 많이 받았어요. 제가 가장 좋아하는 플랫폼을 선택하고 개발자 옹호자와 독립 응용 프로그램 개발자로 이 플랫폼에 배치했기 때문입니다.나는 이 기술이나 그 기술을 보여주기 위해 귀여운 프레젠테이션을 만드는 데 익숙해졌다.이 점을 하기 위해 나는 매우 좋은 소프트웨어 플랫폼을 제공하여 나에게 사용하게 했지만, 나의 많은 very cute apps 는 지금까지 어느 곳에서도 생산 판매에 접근한 적이 없다.

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

나는 처음으로 Parse의 총애를 받아 망가졌다. 그들은 나의 웹과 모바일 백엔드에서 Parse의 데이터베이스와 sweetpush 알림 서비스를 사용했다.그리고 Parse의 공식 서비스는 2017년 페이스북에 인수된 후 폐쇄되었다.

가장 잊을 수 있는 장면을 만든 후에 나는 Firebase로 이사했다.그것은 확실히 실시간 데이터베이스 업데이트, 알림 전송, 분석의 두 번째 좋은 선택이다.결국 ML 패키지가 등장하면서 진정한 머신러닝 통합까지 포함된다.봐라, Firebase가 인터넷 위탁 관리를 제공했다!너무 좋아요!나는 그것을 달콤한 MBA**와 사이트로 위탁 관리할 수 있다.
사탕집 초콜릿 공장의 아이들처럼 개발자들은 이런 디자인이 정교하고 아름다운 플랫폼에 끌린다. 이런 플랫폼은 그들의 소형 응용 프로그램에 사용된다. 그들이 원가 효과가 있으면 잘 보여주고 프로젝트를 빨리 얻고 운영할 수 있다.

그러나 때로는 소형 개인 프로젝트를 중형으로 확대해야 할지도 모른다.만약 당신이 일하는 환경에서 당신의 프로젝트가 Firebase 등 우수한 플랫폼이 제공하는 자원이나 기능을 초과한다면 어떻게 해야 합니까?이 시리즈의 강좌에서 저는 Microsoft가 강하고 기업이 우호적인 클라우드 제품인 Azure에 웹 프로젝트를 어떻게 배치하는지 토론할 것입니다.앞으로의 강좌에서, 데이터베이스 추가 등을 통해 그것을 확장하는 방법을 보여 드리겠습니다.시작합시다.

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

이 문서에서는 Vue를 설정하는 가장 간단한 방법을 설명합니다.jsCLI는 GitHub를 통해 Azure에 웹 응용 프로그램을 구축하여 지속적인 통합을 실현한다. 왜냐하면 우리처럼 응석받이로 자란 사람들은 시간을 낭비할 시간이 없기 때문이다.
주의해야 할 것은 Azure에서 정적 사이트를 관리하는 방법에 관한 우수한 강좌가 많다. 예를 들어 this one.이것은 Azure 저장소에서 정적 사이트 파일을 발표하는 것과 관련이 있습니다.나는 실제로 정적 사이트의 숙주를 찾고 있는 것이 아니다.반대로 Vue CLI를 사용하여 Vue 응용 프로그램을 구축하고 GitHub로 전송하고 싶습니다. 변경 사항을 GitHub로 전송할 때마다 구축 프로세스가 선택됩니다.
이상적인 상황에서 Azure 스타일의 웹 위탁 관리는 Firebase 스타일의 웹 위탁 관리와 같지 않다. 이것은 로컬에서 Firebase CLI를 구축하고 사용해서 내용을 업로드하고 배치해야 한다. 더욱이 Netlify가 Vue 응용 프로그램에 제공하는 매우 간단한 연속 배치와 같다. 그 중에서 변경은 자동으로 GitHub에서 추출하고 구축하며 배치한다.일단 인터넷 위탁 관리를 잘 처리하면 저는 사이트를 업데이트하는 깨끗한 과정이 있을 것입니다. 잠시 후에Azure 제품 조합의 다른 도구를 사용하여 강화할 수 있습니다.

1단계: Azure 계정 만들기

테스트 목적으로 새로운 웹 응용 프로그램을 시작하고 실행하기 위해 signing up for Azure 무료 계정을 만들 수 있습니다.

일단 Azure에 등록하면 Azure 포털을 찾을 수 있습니다.여기에서 응용 프로그램의 창설, 배치, 기타 실현, 예를 들어 ML과 데이터베이스 관리를 관리할 수 있습니다.당신도 Azure CLI나 VS Code 응용 프로그램 확장을 통해 대량으로 관리할 수 있지만, 포털에서 당신의 응용 프로그램을 직관적으로 추적할 수 있게 해 주는 것이 도움이 된다고 생각합니다.

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 구축js 응용 프로그램 및 설정 VS 코드

Vue를 만드는 가장 간단한 방법입니다.js 응용 프로그램은 Vue UI를 사용합니다. 이것은 CLI 프로세스를 시각화하는 데 도움을 주는 GUI입니다.설치Vue CLI 후 터미널을 열고 vue ui 를 입력하면 다음과 같은 효과를 볼 수 있습니다.

새 Vue CLI 내장 응용 프로그램을 만드는 과정에서 Visual Studio 코드나 원하는 편집기에서 응용 프로그램을 사용할 수 있는 기본적인 웹 응용 프로그램을 만들 것입니다.하지만 VS 코드를 추천합니다. 놀라운 Azure 확장이 Azure를 사용할 때의 생활을 더욱 쉽게 할 수 있기 때문입니다.만약 당신이 이러한 확장을 설치하지 않았다면, 나는 당신이 이렇게 하는 것을 격려합니다.그것들은 매우 많다. 명령 팔레트를 열고 VS 코드 시장에서 검색한다Azure.

최소한 Azure 계정, Azure 도구, Azure 응용 프로그램 서비스 확장을 설치합니다.이것들을 설치하면 편집기가 알림을 보낼 때 VS 코드에서 Azure 계정에 로그인할 수 있습니다.로그인하면 Azure에서 팀을 위해 만든 모든 요소에 접근할 수 있습니다.이를 보려면 VS 코드 사이드바에서 Azure 로고를 클릭합니다.네가 진보함에 따라, 이것들은 모두 쓸모가 있을 것이다.

3단계: 배포 준비

이제 GitHub에서 배포하고 지속적으로 통합할 수 있도록 아기 웹 응용 프로그램을 준비해야 합니다.Vue 응용 프로그램은 일반적으로 디렉터리를 구축하고 /dist 폴더를 배치합니다.로컬에서 Vue 응용 프로그램npm run build을 구축하거나 Vue UI에서 작업을 실행합니다.
다음은 응용 프로그램을 확보하세요.gitignore 파일에는 새로 만든 dist 폴더가 포함되지 않습니다. 삭제합니다.gitignore 대 /dist 의 인용.계속하여 코드 라이브러리를 GitHub repo로 전송합니다.
그리고 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.

포털 왼쪽 상단의 리소스 만들기

를 클릭합니다.

가운데 패널

에서 웹 앱을 클릭합니다.

'기본'옵션 카드에서 웹 응용 프로그램을 추가할 구독과 자원 그룹을 선택하십시오.새로운 계정에 대해 포털에서 이 계정을 만들어야 할 수도 있습니다.

네트워크 응용 프로그램 이름

코드 게시 선택

런타임 스택 드롭다운 목록에서 기본 버전의 노드를 선택합니다.

플랫폼에서 "Windows"를 선택합니다(기본 문서를 설정하기 위한 IIS 구성 파일을 만들기 때문에 중요합니다)

근처 리소스에 대한 위치 선택

그리고 설정을 저장하고 응용 프로그램을 배치합니다.Azure는 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 응용 프로그램을 코드 라이브러리에 연결

이제 Azure에게 코드 라이브러리를 어디서 찾을 수 있는지 알려줘야 합니다.현재 Baby Vue 애플리케이션이 GitHub에서 안전하므로 포털의 Deployment Center 탭으로 이동하여 GitHub를 클릭합니다.

Note, you need to connect GitHub to your Azure account

"계속"을 누르고 "응용 서비스 생성 서비스"를 선택하십시오.이것은 코드를 구축하고 배치하는 엔진인 Kudu입니다.

계속을 다시 클릭하고 GitHub의 적절한 영역을 선택하여 응용 프로그램에 연결합니다.모든 것이 일치할 때'완료'를 누르면 첫 번째 배치를 실행합니다.

너는 그것이 실행될 때 로그를 검사해서 무슨 일이 일어났는지 볼 수 있다.만약 문제가 있다면, 이것은 매우 도움이 될 것이다.또한 구축 프로세스가 예상대로 실행되는지 확인할 수 있습니다.

만약 네가 지금 너의 사이트를 방문한다면, 불행하게도, 너는 그것이 잘못을 저질렀다는 것을 보게 될 것이다.로그를 찾아보면 다음과 같은 문제가 발생합니다.

"server.js/app.js 파일이 없습니다. 웹.config가 생성되지 않았습니다"메시지가 없습니까?이것이 바로 우리가 사이트를 추가해야 할 단서다.Azure가 색인을 찾는 위치를 표시하기 위해 파일을 응용 프로그램 루트 디렉터리에 설정합니다.html(제시: 이것은 dist/index.html입니다. 우리는 그것이 구축 과정에 의해 복제된 것을 볼 수 있습니다.
이 때 필요한 것은 파일을 만들고 다음 설정을 일일이 열거하는 것입니다.

<?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 페이지.이 사이트를 삭제합니다.응용 프로그램 루트 디렉토리에 파일을 구성하여 GitHub로 전송합니다.응용 프로그램은 자동으로 재구성하고 재배치해야 한다.만약 모든 것이 순조롭다면, 당신은 아름다운 Vue를 가질 것이다.azurewebsites의 jsstarter 사이트.net 도메인!

다음 강좌에서 저는 현재 개발 중인 사이트를 구축하고 데이터베이스를 추가할 것입니다.스포일러 경보는 Azure cocktails라고 불리며 데이터는 나의 미스터 포스톤 cocktails 데이터 집합에 의해 구동되고 Firebase에서 Azure를 내보내고 가져옵니다. 사이트의 모든 칵테일은 파란색입니다.
나의 첫 번째 기교에서, 나는 나의 미스터 스톤 칵테일 데이터 집합을 사용하여 새로운 웹 응용 프로그램인 Azure Cocktails에 지원을 제공할 것이다.파란색 칵테일만 제공합니다.... 때문에pic.twitter.com/OOj3Ebzax9-Vx.Jen Looper(
)
기대해주세요!
*Parse는 지역사회 기반의 프로젝트로서 계속 존재하고 이를 위해 더 많은 힘을 제공합니다!
*MBaaS는 "백엔드 이동 서비스"를 의미합니다.

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