서버에 Angular Universal 호스팅

지금까지 당신은 우리converted our Angular application to Angular Universal가 어떻게 하는지 보았습니다.우리optimized this Angular Universal app for SEO.
어려운 말을 내려놓고 사이트를 접속할 때가 됐다는 뜻이다.
얼마 전, 내가 이렇게 하려고 시도했을 때, 나는 이것이 어떻게 일을 할 것인지를 묘사하는 많은 문장을 찾지 못했다.
간략하게 설명한 내용은 다음과 같습니다.
Jim은 당신의 사이트를 보고 인터넷에 당신의 멋진 사이트를 요구하고 싶어 합니다.일반 도메인 이름 형식.DNS는 도메인을 서버의 IP 주소로 가리킵니다.
기본적으로 서버는 포트 80 또는 443에서 이러한 웹 사이트에 SSL 서비스를 제공합니다.
Angular Universal 애플리케이션을 사용하려면 백그라운드에서 실행되는 노드 서버를 시작해야 합니다.

node /home/user/domain/dist/server/main.js

현재 우리 서버는 서버에서 실행 중localhost:4000입니다.
이때 나는 각도 우주로 향하는 것에 대해 약간의 의문과 유감을 느꼈다.
그러나 서버의 에이전트를 사용하여 내부에서 이 포트로 영역을 바꿀 수 있습니다.
나는 너에게 더욱 좋아하는 방식과 다른 방식을 보여줄 것이다.다른 방법은 나의 유일한 해결 방안이다. 왜냐하면 우리 서버는 vhost 단계에서 수정할 수 없기 때문이다.

서버에 Angular 스크립트 배포
서버에서 Angular 스크립트를 가져오는 방법에는 여러 가지가 있습니다.

서버의 배포

서버에 최신git 지점을 가져오고 모든 의존 항목을 설치합니다.
이것은 매우 좋은 배치 방식이지만, 전력이 부족한 소형 서버는 설치하고 구축할 때 붕괴될 수 있다.

npm install
npm run build:ssr

GitHub를 통한 배포

이것은 이상적일 것이다.GitHub에서 모든 파일을 구축하고 dist 폴더를 zip 파일로 만든 다음 서버로 전송할 수 있습니다.
나는 아마도 이후의 문장에서 이 문제를 다시 토론할 것이다.
지금 당신은 Philo's article에서 이 개념에 관한 내용을 더 많이 읽을 수 있습니다.

로컬 배포

이것은 내가 두 가지 방법 사이에서 중간층으로 사용하는 방법의 하나다.
이 기능은 서버가 어떠한 이유로도 배치를 처리할 수 없고 GitHub가 부품을 서버로 전송할 수 없을 때 매우 강력합니다.
이것은 우리가 deploy 지점에서 로컬로 모든 내용을 구축한다는 것을 의미한다.

npm install
npm run build:ssr

이것은 우리에게 정확한 거리를 제공할 것이다.
현재, 우리는 이 디스켓을 deploy 지점에 추가할 것입니다.

# Force add the dist folder
git add -f dist/
git commit -m "Add build files"
git push -f origin production

그리고 서버에서 deploy 지점을 서명하고 끌어낼 수 있습니다. 그러면 파일을 구축할 준비가 됩니다.

Note: This is not a preferred method and should only be used if the above two options don't work for you.

Angular 서버를 영원히 실행
노드 스크립트로 Angular Universal 서버를 시작했지만 스크립트를 종료하면 스크립트가 중지된다는 것을 기억하실 수 있습니다.
우리는 PM2 이런 시스템을 사용하여 이 스크립트를 영원히 실행할 수 있다. 이 스크립트는 우리가 그것을 감시하고 다시 시작할 수 있도록 한다.
서버에 전역적으로pm2 스크립트를 설치합니다.

npm install pm2 -g

현재, 우리는pm2로 같은 스크립트를 시작할 수 있으며, 심지어는 그것에 이름을 붙일 수도 있다.

pm2 start /home/user/domain/dist/server/main.js --name yourappname

그런 다음 중지하고 이름을 사용하여 다시 시작할 수 있습니다.

pm2 stop yourappname
pm2 restart yourappname

프록시 프로세스의 각범 함수
서버에 Angular를 배치하고 실행하면 localhost: 4000을 표시하기 위해 기본 영역을 에이전트하는 방법을 찾아야 합니다.
이것은 사용자가 사용하는 서버에 달려 있지만 아파치를 사용한다고 가정하십시오.
이 도메인의 가상 호스트 파일을 찾아 다음 행을 추가합니다.

ProxyPass / http://localhost:4000/

You would be able to find or create a new virtual host in this folder: /etc/apache2/conf-available Read more

이 코드는 모든 요청이 내부에서localhost: 4000으로 바뀌어야 한다는 것을 설명합니다.proxy 및 proxy_http 모듈이 활성화되어 있는지 확인합니다.

sudo a2enmod proxy_http

이 옵션을 추가하면 아파치를 다시 시작해야 합니다.

sudo service apache2 restart

htaccess의 각도를 가진 유니버설 프록시
이것은 다른 방식이다. 내가 인터넷에서 본 상황을 보면 이것은 추천하지 않는 것이다.그러나 나는 정확한 원인이 무엇인지 확실하지 않다.
특히 vhost 파일이나 서버 설정에 접근할 수 없을 때 유용합니다.
따라서 vhost 파일에 접근할 수 없기 때문에 htaccess 방법을 사용했습니다. 본질적으로도 마찬가지입니다..htaccess 파일을 열고 다음 줄을 추가합니다.

<IfModule mod_rewrite.c>
RewriteEngine on

# Redirect Public ports to NodeJS port
RewriteRule ^$ http://localhost:4000 [P,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://localhost:4000/$1 [P,L]
</IfModule>

이 줄들은 모든 요청이localhost: 4000 내부 서버에 제공될 수 있도록 합니다.
현재 웹 사이트가 실행 중인지 확인할 수 있습니다.
트위터에 올라온 이 글에 대한 생각, 질문, 평론이 있다면 저에게 알려주세요.

읽어주셔서 감사합니다. 연결해 드리겠습니다.
제 블로그를 읽어주셔서 감사합니다.내 이메일 시사 통신을 구독하고 Facebook 또는