Angular 앱을 어떻게 배포합니까?

Angular 앱이 프로덕션 단계에 도달하면 어떻게 배포합니까?

지금까지 본 모든 가이드 ( angular.io조차도 )는 변경 사항을 반영하기 위해 lite-server를 제공하고 browserSync에 의존하고 있지만 개발이 끝나면 앱을 어떻게 게시 할 수 있습니까?

페이지 에서 컴파일 된 .js파일을 모두 가져 index.html오거나 gulp를 사용하여 축소합니까? 그들은 작동합니까? 프로덕션 버전에서 SystemJS가 필요합니까?

실제로 하나의 질문에 두 가지 질문이 있습니다.

첫 번째 는 응용 프로그램을 호스팅하는 방법입니까? .
그리고 @toskv는 대답하기에는 너무 광범위한 질문을 언급했으며 수많은 다른 것들에 달려 있습니다.

두 번째는 것입니다 응용 프로그램의 배포 버전을 준비 어떻게해야합니까? .
여기 몇 가지 옵션이 있습니다.

1. 그대로 배포하십시오. 그냥-축소, 연결, 이름 맹 글링 등이 없습니다. 모든 ts 프로젝트를 변환하십시오. 모든 결과 js / css / ... 소스 + 종속성을 호스팅 서버에 복사하면 좋습니다.

2. webpack또는 systemjs빌더 와 같은 특수 번들 도구를 사용하여 배포하십시오 .
   그들은 # 1에서 부족한 모든 가능성을 가지고 있습니다.
   모든 앱 코드를 HTML에서 참조하는 몇 개의 js / css / ... 파일로 압축 할 수 있습니다. systemjs빌더를 사용하면 systemjs배치 패키지의 일부로 포함 할 필요가 없습니다 .

3. 당신은 사용할 수 있습니다 ng deploy귀하의 CLI에서 응용 프로그램을 배포하는 각도 8로. ng deploy선택한 플랫폼 (예 :)과 함께 사용해야합니다 @angular/fire. 공식 문서를 확인하여 가장 적합한 것이 무엇인지 확인할 수 있습니다.

예 systemjs, 패키지의 일부로 다른 외부 라이브러리 를 배치 하고 배치해야 할 가능성이 높습니다 . 그리고 네, HTML 페이지에서 참조하는 몇 개의 js 파일로 묶을 수 있습니다.

systemjs모듈 로더가 처리 하므로 페이지에서 컴파일 된 모든 js 파일을 참조 할 필요는 없습니다 .

나는 그것이 진흙탕처럼 들린다는 것을 알고 있습니다-여기 # 2를 시작하는 데 도움이되는 두 가지 훌륭한 샘플 응용 프로그램이 있습니다.

SystemJS 빌더 : angular2 seed

WebPack : angular2 웹팩 스타터

간단한 대답. Angular CLI를 사용하여

ng build 

프로젝트의 루트 디렉토리에있는 명령. 사이트는 dist 디렉토리에 작성되며 모든 웹 서버에 배치 할 수 있습니다.

앱에 프로덕션 설정이있는 경우 테스트를 위해 빌드해야합니다.

ng build --prod

그러면 dist디렉토리에 프로젝트가 빌드 되고 서버로 푸시 될 수 있습니다.

이 답변을 처음 게시 한 이후 많은 일이 발생했습니다. CLI는 최종적으로 1.0.0에 있으므로이 가이드를 따라 프로젝트를 빌드하기 전에 업그레이드해야합니다. https://github.com/angular/angular-cli/wiki/stories-rc-update

Angular CLI를 사용하면 쉽습니다. 헤 로쿠의 예 :

1. Heroku 계정을 생성하고 CLI를 설치하십시오

2. 이동 angular-cli받는 출발을 dependencies에서 package.json당신에게 Heroku를 누르면이 설치됩니다 그래서 (.

3. 코드가 Heroku로 푸시 될 때 postinstall실행될 스크립트를 추가하십시오 ng build. 또한 다음 단계에서 작성 될 노드 서버에 대한 시작 명령을 추가하십시오. 그러면 앱의 정적 파일 dist이 서버 의 디렉토리에 배치되고 나중에 앱이 시작됩니다.

"scripts": {
  // ...
  "start": "node server.js",
  "postinstall": "ng build --aot -prod"
}

4. 앱을 제공 할 Express 서버를 만듭니다.

// server.js
const express = require('express');
const app = express();
// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 8080);

5. Heroku 리모컨을 만들고 푸시하여 앱을 제거합니다.

heroku create
git add .
git commit -m "first deploy"
git push heroku master

여기에 빠른입니다 작성자 어떻게 처리하는 HTTPS 등을 사용 요청을 강제하는 방법을 포함한 자세한 내용을 가지고 내가 한이 PathLocationStrategy:)

나는 영원히 함께 사용합니다 :

1. angular-cli to dist 폴더를 사용하여 Angular 응용 프로그램 빌드ng build --prod --output-path ./dist

2. Angular 애플리케이션 경로에 server.js 파일을 작성하십시오 .

   const express = require('express');
   const path = require('path');
   
   const app = express();
   
   app.use(express.static(__dirname + '/dist'));
   
   app.get('/*', function(req,res) {
       res.sendFile(path.join(__dirname + '/dist/index.html'));
   });
   app.listen(80);

3. 영원히 시작 forever start server.js

그게 다야! 응용 프로그램이 실행 중이어야합니다!

바라건대 이것이 도움이 될 수 있기를 바라며, 일주일 동안 이것을 시도 할 수 있기를 바랍니다.

1. Azure에서 웹앱 만들기
2. 코드 대 Angular 2 앱을 만듭니다.
3. bundle.js에 웹팩.
4. Azure 사이트 게시 된 프로필 XML 다운로드
5. 사이트 프로필과 함께 https://www.npmjs.com/package/azure-deploy 를 사용하여 Azure-deploy를 구성 하십시오 .
6. 배포합니다.
7. 크림 맛.

localhost에서 나와 같은 앱을 테스트 하거나 빈 흰색 페이지에 문제가있는 경우 다음을 사용하십시오.

ng build --prod --build-optimizer --base-href="http://127.0.0.1/my-app/"

설명:

ng build

응용 프로그램을 빌드하지만 코드에는 공간, 탭 및 기타 사람이 코드를 읽을 수있게 해주는 많은 것들이 있습니다. 서버의 경우 코드 모양이 중요하지 않습니다. 이것이 내가 사용하는 이유입니다.

ng build --prod --build-optimizer 

이것은 생산을위한 코드를 만들고 크기 --build-optimizer를 줄인다 [ ]는 더 많은 코드를 줄일 수있게한다].

결국 나는 --base-href="http://127.0.0.1/my-app/"'메인 프레임'이있는 응용 프로그램을 보여주기 위해 추가 합니다 [간단한 단어로]. 그것으로 당신은 모든 폴더에 여러 각도 앱을 가질 수 있습니다.

Angular2 앱을 프로덕션 서버에 배포하려면 무엇보다도 앱이 컴퓨터에서 로컬로 실행되도록하십시오.

Angular2 앱은 노드 앱으로 배포 할 수도 있습니다.

따라서 노드 진입 점 파일 server.js / app.js를 작성하십시오 (이 예제에서는 express 사용).

var express = require('express'),
    path = require('path'),
    fs = require('fs');

var app = express();
var staticRoot = __dirname + '/';

app.set('port', (process.env.PORT || 3000));

app.use(express.static(staticRoot));

app.use(function(req, res, next){

    // if the request is not html then move along
    var accept = req.accepts('html', 'json', 'xml');
    if(accept !== 'html'){
        return next();
    }

    // if the request has a '.' assume that it's for a file, move along
    var ext = path.extname(req.path);
    if (ext !== ''){
        return next();
    }

    fs.createReadStream(staticRoot + 'index.html').pipe(res);

}); 

app.listen(app.get('port'), function() {
    console.log('app running on port', app.get('port'));
});

또한 package.json 파일에 종속성으로 express 를 추가 하십시오.

그런 다음 원하는 환경에 배치하십시오.

IIS에 배포 할 수있는 작은 블로그를 만들었습니다. 링크를 따르십시오

IIS에서 응용 프로그램을 배포하려면 다음 단계를 수행하십시오.

1 단계 : ng build --prod 명령을 사용하여 Angular 응용 프로그램 빌드

2 단계 : 빌드 후 모든 파일은 응용 프로그램 경로의 dist 폴더에 저장됩니다.

3 단계 : C : \ inetpub \ wwwroot 에 QRCode 라는 이름 으로 폴더를 만듭니다 .

4 단계 : dist 폴더의 내용을 C : \ inetpub \ wwwroot \ QRCode 폴더로 복사하십시오.

5 단계 : 명령 (Window + R)을 사용하여 IIS 관리자를 열고 inetmgr을 입력 한 다음 확인을 클릭합니다.

6 단계 : 기본 웹 사이트를 마우스 오른쪽 단추로 클릭하고 애플리케이션 추가를 클릭하십시오 .

7 단계 : 별명 'QRCode'를 입력 하고 실제 경로를 C : \ inetpub \ wwwroot \ QRCode로 설정하십시오 .

8 단계 : index.html 파일을 열고 href = "\" 행을 찾아 '\'를 제거하십시오.

9 단계 : 이제 모든 브라우저에서 애플리케이션을 찾아보십시오.

더 나은 이해를 위해 비디오를 팔로우 할 수도 있습니다.

비디오 URL : https://youtu.be/F8EI-8XUNZc

Apache (Linux 서버)에 애플리케이션을 배치 한 경우 다음 단계를 수행 할 수 있습니다. 다음 단계를 수행하십시오 .

1 단계 : ng build --prod --env=prod

2 단계 . (dist를 서버에 복사) dist 폴더를 생성하고 dist 폴더를 복사하여 서버의 루트 디렉토리에 배포하십시오.

3 단계 . .htaccess루트 폴더에 파일을 만들고 이것을.htaccess

 <IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Ahead of Time 컴파일러로 컴파일하여 가장 작고 빠른 로딩 프로덕션 번들을 얻고 각 AOT 요리 책 ( https://angular.io/docs/ts/latest/cookbook)에 표시된대로 롤업으로 트리 쉐이크 / 최소화하십시오. /aot-compiler.html

이전 답변에서 언급했듯이 Angular-CLI에서도 사용할 수 있지만 CLI를 사용하여 앱을 만들지 않은 경우 요리 책을 따라야합니다.

또한 AOT 요리 책으로 만든 번들을 포함하는 재질 및 SVG 차트 (Angular2가 지원)에 대한 실제 예제도 있습니다. 번들을 작성하는 데 필요한 모든 구성 및 스크립트도 있습니다. 여기에서 확인하십시오 : https://github.com/fintechneo/angular2-templates/

파일 수와 AoT 컴파일 빌드의 크기와 개발 환경의 차이를 보여주는 간단한 비디오를 만들었습니다. 위의 github 저장소에서 프로젝트를 보여줍니다. 여기에서 볼 수 있습니다 : https://youtu.be/ZoZDCgQwnmQ

Github 페이지의 Angular 2 배포

ghpages에서 Angular2 웹팩 배포 테스트

먼저 dist응용 프로그램 의 폴더 에서 모든 관련 파일을 가져 오십시오 . 자산 폴더의 + css 파일 + main.bundle.js + polyfills.bundle.js + vendor.bundle.js

그런 다음 작성한 리포지토리에서이 파일을 푸시하십시오.

1-응용 프로그램을 루트 디렉토리에서 실행하려면-이름이 [yourgithubusername] .github.io 인 특수 저장소를 작성 하고이 파일을 마스터 분기에 푸시하십시오.

2-서브 디렉토리 또는 루트 이외의 다른 브랜치에서이 페이지를 작성하려는 경우 브랜치 gh-pages를 작성하고 해당 브랜치에서 해당 파일을 푸시하십시오.

두 경우 모두 배포 된 페이지에 액세스하는 방식이 다릅니다.

첫 번째 경우는 https : // [yourgithubusername] .github.io 이고 두 번째 경우는 [yourgithubusername] .github.io / [Repo name] 입니다.

두 번째 경우를 사용하여 배포하려는 경우 모든 경로 매핑이 지정한 경로에 따라 다르며 [/ branchname]으로 설정해야하므로 dist에서 index.html 파일의 기본 URL을 변경해야합니다.

이 페이지에 링크

https://rahulrsingh09.github.io/Deployment

힘내 레포

https://github.com/rahulrsingh09/Deployment

각도 앱을 빠르고 저렴하게 호스팅하기 위해 Firbase 호스팅을 사용하고 있습니다. 첫 번째 계층에서는 무료이며 Firebase CLI를 사용하여 새 버전을 매우 쉽게 배포 할 수 있습니다. 이 도움말에서는 프로덕션 앵귤러 2 앱을 Firebase에 배포하는 데 필요한 단계를 설명합니다. https://medium.com/codingthesmartway-com-blog/hosting-angular-2-applications-on-firebase-f194688c978d

즉, ng build --prod패키지에 dist 폴더를 생성하고 Firebase 호스팅에 배포되는 폴더를 실행합니다.

Azure에서 Angular 2를 쉽게 배포

1. ng build --prod를 실행 하면 index.html을 포함하여 몇 개의 파일 안에 모두 묶여있는 dist 폴더가 생성됩니다.

2. 내부에 자원 그룹 및 웹 앱을 작성하십시오.

3. FTP를 사용하여 dist 폴더 파일을 배치하십시오. 푸른 색으로 응용 프로그램을 실행하기 위해 index.html을 찾습니다.

그게 다야. 앱이 실행 중입니다!

2017 년 현재 가장 좋은 방법은 각도 프로젝트에 angular-cli (v1.4.4)를 사용하는 것입니다.

ng build --prod --env=prod --aot --build-optimizer --output-hashing none

--prod를 사용하여 기본적으로 켜져있는대로 --aot를 명시 적으로 추가 할 필요는 없으며 --output-hashing의 사용은 캐시 버스트와 관련한 개인 선호도에 따라 다릅니다.

다음 을 추가하여 CDN 지원을 명시 적으로 추가 할 수 있습니다 .

 --deploy-url "https://<your-cdn-key>.cloudfront.net/"

호스팅에 CDN을 사용하려는 경우 상당히 빠릅니다.

로 각도 CLI , 다음 명령을 사용할 수 있습니다 :

ng build --prod

응용 프로그램을 배포하는 데 필요한 모든 항목이 포함 된 dist 폴더를 생성합니다.

웹 서버에 대한 연습이 없으면 Angular to Cloud 를 사용하는 것이 좋습니다 . dist 폴더를 zip 파일로 압축하여 플랫폼에 업로드하면됩니다.

나는 각도에 앞서 웹 경험을 가진 많은 사람들이 전쟁 중에 웹 아티팩트를 배치하는 데 익숙하다고 말합니다 (예 : Java / Spring 프로젝트 내부의 jquery 및 html). 각도 및 REST 프로젝트를 별도로 유지하려고 시도한 후 CORS 문제를 해결하기 위해이 작업을 끝냈습니다.

내 솔루션은 CLI로 생성 된 모든 각도 (4) 내용을 my-app에서 MyJavaApplication / angular로 옮기는 것이 었습니다. 그런 다음 maven-resources-plugin을 사용하여 / angular / dist에서 내 배포 루트 (예 : $ project.build.directory} / MyJavaApplication)로 내용을 이동하도록 Maven 빌드를 수정했습니다. Angular는 기본적으로 전쟁의 근원에서 자원을로드합니다.

각도 프로젝트에 라우팅을 추가하기 시작했을 때 index.html을 / dist에서 WEB-INF / app로 복사하도록 maven 빌드를 추가로 수정했습니다. 또한 모든 서버 측 휴면 호출을 색인으로 리디렉션하는 Java 컨트롤러가 추가되었습니다.

아래 링크를 따르십시오.

Index.html 페이지 스크립트 파일 경로 변경 위치를 찾을 수없는 오류가 발생하는 경우 component.html 경로를 변경하십시오.

https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy