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

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

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

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

답변

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

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

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

그대로 배포하십시오. 그냥-축소, 연결, 이름 맹 글링 등이 없습니다. 모든 ts 프로젝트를 변환하십시오. 모든 결과 js / css / … 소스 + 종속성을 호스팅 서버에 복사하면 좋습니다.
webpack또는 systemjs빌더 와 같은 특수 번들 도구를 사용하여 배포하십시오 .
그들은 # 1에서 부족한 모든 가능성을 가지고 있습니다.
모든 앱 코드를 HTML에서 참조하는 몇 개의 js / css / … 파일로 압축 할 수 있습니다. systemjs빌더를 사용하면 systemjs배치 패키지의 일부로 포함 할 필요가 없습니다 .
당신은 사용할 수 있습니다 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를 사용하면 쉽습니다. 헤 로쿠의 예 :

Heroku 계정을 생성하고 CLI를 설치하십시오
이동 angular-cli받는 출발을 dependencies에서 package.json당신에게 Heroku를 누르면이 설치됩니다 그래서 (.
코드가 Heroku로 푸시 될 때 postinstall실행될 스크립트를 추가하십시오 ng build. 또한 다음 단계에서 작성 될 노드 서버에 대한 시작 명령을 추가하십시오. 그러면 앱의 정적 파일 dist이 서버 의 디렉토리에 배치되고 나중에 앱이 시작됩니다.

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

앱을 제공 할 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);

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

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

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

답변

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

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

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);

영원히 시작 forever start server.js

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

답변

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

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

답변

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에 배포 할 수있는 작은 블로그를 만들었습니다. 링크를 따르십시오