Angular 앱을 배포하려면 어떻게 해야 합니까?
운영 단계에 도달한 Angular 애플리케이션은 어떻게 구축합니까?
지금까지 본 가이드(angular.io에서도)는 모두 라이트 서버에 의존하여 서비스를 제공하고 browser Sync에 변경을 반영하고 있습니다.개발을 마치면 앱을 공개하려면 어떻게 해야 합니까?
된 Import를 ?.jsindex.html호출할 것인가, 아니면 꿀꺽꿀꺽 마실 것인가?과가있??? ?? 필요합니까?JS는요?
간단한 답변입니다.Angular CLI를 사용하여
ng build
명령어를 사용합니다.사이트는 dist 디렉토리에 생성되며 임의의 웹 서버에 배포할 수 있습니다.
테스트용으로 빌드됩니다.앱에 프로덕션 설정이 있는 경우 사용해야 합니다.
ng build --configuration production
이렇게 하면 프로젝트가 에 구축됩니다.dist디렉토리 및 이것은 서버에 푸시 할 수 있습니다.
제가 이 답변을 처음 올린 이후로 많은 일이 있었습니다.CLI가 드디어 1.0.0이 되었으므로 이 가이드에 따라 프로젝트를 빌드하기 전에 업그레이드해야 합니다.https://github.com/angular/angular-cli/wiki/stories-rc-update
당신은 실제로 여기 두 가지 질문을 하나로 만지고 있습니다.
첫 번째는 How to host your application?입니다.
그리고 @toskv가 언급했듯이, 그것은 대답하기엔 너무 광범위하고 많은 다른 것들에 의존합니다.
두 번째는 어플리케이션의 전개 버전을 어떻게 준비합니까?
여기에는 몇 가지 옵션이 있습니다.
- 그대로 전개합니다.단지, 미니메이션, 연결, 이름 망글링 등은 불필요합니다.모든 ts 프로젝트를 변환하여 결과 js/css/... 소스 + 종속성을 호스팅 서버에 복사하면 준비가 완료됩니다.
,, 、 음 、 음 、 deploy 、 deploy 、 deploy 。
webpack★★★★★★★★★★★★★★★★★」systemjs빌더
그들은 1위에는 없는 모든 가능성을 가지고 있다.
JS/css/... 입니다.HTML에서 참조하는 입니다.systemjs빌더(builder)를 사용하면 더 이상 포함할 필요가 없습니다.systemjs배포 패키지의 일부로 사용할 수 있습니다.하시면 됩니다.
ng deploy【CLI】【Angular 8】【CLI】【Angular 8】【CLI】.ng deploy(예: will will플 of of of of of of(((((((((((((((((((((((( ） 。@angular/fire여기서 공식 문서를 확인하시면 가장 적합한 문서를 확인하실 수 있습니다.
, ,, 부부의부 yes yes yes yes yes yes yes yes yes yes yes yes yes yes yes yes yes yes yes yes yes yes 해야 합니다.systemjs패키지의 일부로서 그 외의 외부 라이브러리도 다수 포함되어 있습니다.HTML 페이지에서 참조하는 js 파일 몇 개에 번들 할 수 있습니다.
、 페 、 you 、 이 、 js の you you 。systemjs이치노
애매모호하게 들리겠지만 #2를 시작하는 데 도움이 되는 샘플 어플리케이션은 다음과 같습니다.
SystemJS 빌더: angular2 시드
WebPack: angular2 WebPack 스타터
Angular CLI를 사용하면 간단합니다.Heroku의 예:
Heroku 계정을 만들고 CLI를 설치합니다.
angular-clidependenciespackage.json(헤로쿠)postinstall「」를 실행하는 .ng build합니다.또한 다음 단계에서 작성되는 노드서버의 start 명령어를 추가합니다.이 러러 a a a for for for for for for for for for for 에 저장됩니다.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
forever와 함께 사용합니다.
- 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 (시작)
forever start server.js
이상입니다! 응용 프로그램이 실행 중이어야 합니다!
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'));
});
패키지에 의존관계로서 express도 추가합니다.json 파일.
그런 다음 원하는 환경에 배포합니다.
IIS에 도입하기 위해 작은 블로그를 만들었습니다.팔로우 링크
이게 도움이 됐으면 좋겠고, 이번 주 중에 이걸 시도해 볼 수 있었으면 좋겠어요.
- Azure에서 웹 앱 만들기
- vs 코드에서 Angular 2 앱을 만듭니다.
- 웹 팩에서 번들.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/" 앱이 수 .어떤 폴더에도 여러 개의 각진 앱이 있을 수 있습니다.
IIS에서 애플리케이션을 전개하려면 , 다음의 순서에 따릅니다.
순서 1: 명령어 ng build --prod를 사용하여 Angular 어플리케이션을 빌드합니다.
2단계: 빌드 후 모든 파일은 응용 프로그램 경로의 dist 폴더에 저장됩니다.
순서 3: C:\inetpub\wwwroot에 QRCode라는 이름의 폴더를 만듭니다.
순서 4: dist 폴더의 내용을 C:\inetpub\wwwroot\로 복사합니다.QRCode 폴더
순서 5: 명령어(Windows + R)를 사용하여 IIS Manager를 열고 inetmgr을 입력하고 OK를 클릭합니다.
6단계: 기본 웹 사이트를 마우스 오른쪽 버튼으로 클릭하고 응용 프로그램 추가를 클릭합니다.
순서 7: 에일리어스 이름 'QRCode'를 입력하고 물리 경로를 C:\inetpub\wwwroot\로 설정합니다.QRCode.
8단계: index.disc 파일을 열고 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>
다음 각도의 AOT 요리책에 나타나 있듯이 Foread of Time 컴파일러를 사용하여 컴파일하고 트리를 흔들거나 최소화함으로써 가장 작고 빠르게 로딩할 수 있는 번들을 얻을 수 있습니다.
이는 이전 답변에서 설명한 바와 같이 Angular-CLI에서도 사용할 수 있지만, CLI를 사용하여 앱을 만들지 않았다면 요리책을 따라야 합니다.
AOT 요리책으로 만든 번들을 포함한 재료와 SVG 차트(Angular2 지원)도 가지고 있습니다.번들을 작성하는 데 필요한 모든 구성 및 스크립트도 찾을 수 있습니다.여기를 봐주세요.https://github.com/fintechneo/angular2-templates/
AoT 컴파일된 빌드 대 개발 환경의 파일 수와 크기 차이를 보여 주는 간단한 비디오를 만들었습니다.위 github 저장소의 프로젝트를 보여줍니다.https://youtu.be/ZoZDCgQwnmQ 를 참조해 주세요.
Github 페이지에서의 Angular 2 전개
ghpages에서의 Angular2 Webpack 전개 테스트
모든 을 「」, 「」로부터 가져옵니다.dist「CSS」+「CSS」.「.ColyflagesColyflagesColyflages. + .bundle.polyfiles.폴리 파일polyfiles.delbundle.polyfiles.delbundle.polyfiles.
그런 다음 작성한 repo에서 이 파일을 푸시합니다.
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
Git Repo
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파이어베이스 호스트
Angular 2를 푸른색으로 쉽게 전개
ng build --prod를 실행합니다.이것에 의해, index.html 를 포함한 몇개의 파일내에 모든 것이 번들 되어 있는 dist 폴더가 생성됩니다.
리소스 그룹과 그 안에 웹 앱을 만듭니다.
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을 사용하는 경우는, 매우 고속입니다.
Angular CLI 에서는 다음 명령을 사용할 수 있습니다.
ng build --prod
응용 프로그램을 배포하는 데 필요한 모든 것을 포함하는 dist 폴더를 생성합니다.
웹 서버에 대한 경험이 없다면 Angular to Cloud를 사용하는 것이 좋습니다.dist 폴더를 zip 파일로 압축하여 플랫폼에 업로드하기만 하면 됩니다.
angular 이전에 웹 경험이 있는 많은 사람들이 전쟁(Java/Spring 프로젝트 내 jquery 및 html)에 웹 아티팩트를 배치하는 데 익숙하다고 생각합니다.저는 각도와 REST 프로젝트를 분리하려고 노력하다가 결국 CORS 문제를 피하기 위해 이 일을 하게 되었습니다.
저의 솔루션은 CLI에서 생성된 모든 각도(4) 콘텐츠를 My-App에서 MyJava Application/angular로 이동하는 것이었습니다.그런 다음 maven-resources-plugin을 사용하여 콘텐츠를 /angular/dist에서 배포 루트(예: $project)로 이동하도록 Maven 빌드를 수정했습니다.build.directory}/MyJava Application).Angular는 기본적으로 전쟁의 근원에서 리소스를 로드합니다.
angular 프로젝트에 루팅을 추가하기 시작했을 때 index.html을 /dist에서 WEB-INF/app로 복사하도록 maven 빌드를 더 수정했습니다.또한 모든 서버 사이드레스트 콜을 인덱스로 리다이렉트하는 Java 컨트롤러를 추가했습니다.
운영용 응용 프로그램을 빌드하려면
ng build --configuration=production
할 수 .angular.json '키'에 대해서outputPath서 보통 은 " " " 입니다.dist다를 수도 있습니다.
"build": {
"options": {
"outputPath": "dist"
★★★★★★★★★★★★★★★★ dist은, 「」됩니다./dist
빌드 시 각도 프로젝트는 정적 파일 Html, Javascript, CSS 및 이미지 또는 기타 자산으로만 구성됩니다.따라서 클라이언트에 정적 파일을 제공할 수 있는 웹 서버만 있으면 됩니다.그렇게 간단하다.클라이언트에 이러한 정적 파일을 제공할 수 있는 nginx 또는 tomcat일 수 있습니다.이는 각도 문서에도 명시되어 있습니다.
이러한 파일은 정적이므로 파일을 처리할 수 있는 웹 서버에서 호스트할 수 있습니다.
아래 outputPath가 되어 .index.html Import가 Import가 실행되면index.html는 클라이언트에 전달되며 브라우저는 다른 모든 필요한 파일도 가져옵니다. 에 되어 있습니다.index.html.
질문의 두 번째 부분
꿀꺽 삼켜서 최소화 시킬까요?
공식 방법
angular.json각 환경에 대한 특정 구성이 포함되어 있으며, 그 중 하나가optimization
optimization)로 할 수 (true, false)로 할 수 있습니다.
"configurations": {
"production": {
"optimization": true --> will mean true for all properties of the next custom object
optimization.
"configurations": {
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": true
},
"fonts": true
}
로의 "scripts": false.
->스 also> ->"minify": false스타일을 최소화하는 것도 피할 수 있습니다.
최적화를 위해 angular.json에 있는 구성이 무엇이든 빌드 중에 파라미터를 지정하면 덮어쓸 수 있습니다.그래서 실행함으로써ng build --configuration=production --optimization=false하고, 의 각 특성에 됩니다.optimization에 를 제기하다false을 사용하다
모듈 스크립트를 로드하지 못했습니다..' 오류입니다.angular.json으로 이동하여 'OutputPath'를 'dist'로 변경하기만 하면 됩니다.그럼 달려라ng build --configuration production앱을 빌드합니다.
그 이유는 Angular가 어플리케이션이 루트에 있다고 생각하지만 이 변경을 하지 않으면 root/YourAppName에 있다고 생각하기 때문입니다.
아래 링크를 클릭해 주세요.
Index.html 페이지 스크립트파일 경로 변경위치를 찾을 수 없는 에러가 발생할 경우를 대비해 component.html 경로를 변경합니다.
https://angular.io/docs/ts/latest/guide/deployment.html#!#dev-deploy
언급URL : https://stackoverflow.com/questions/35539622/how-do-you-deploy-angular-apps
'programing' 카테고리의 다른 글
| 스프링 부트 시 Tomcat을 사용한HTTP2의 이니블화 (0) | 2023.03.23 |
|---|---|
| wcf에서 raw json(문자열)을 반환하는 중 (0) | 2023.03.23 |
| $watch vs ng-change, ng-checked 등에 의한 각도 트리거 변경 (0) | 2023.03.23 |
| log4j는 JSON 형식을 지원합니까? (0) | 2023.03.23 |
| MongoDB 컬렉션의 모든 문서에 대해 단일 필드를 선택하려면 어떻게 해야 합니까? (0) | 2023.03.23 |