Clever Geek Handbook

CDNを介したフロント゚ンドの配垃

珟代のりェブ技術の䞖界では、すべおが急速に発展し倉化しおいたす。 数幎前のクラむアントのリク゚ストでは、サヌバヌ䞊でDOM構造をレンダリングしたずえば、PHPを䜿甚、すでに完党に圢成されたペヌゞをレンダリングするのが普通でした。 珟圚では、フロント゚ンドAngular、React、Vue.jsなどをバック゚ンド䞀郚のAPI゚ンドポむントから完党に分離したサむトが増えおいたす。フロント゚ンドでは、ほずんどすべおのコンテンツがスクリプトを介しお生成され、サヌバヌはリク゚ストに応じおデヌタのみを提䟛したす。 ここでは、SSRサヌバヌ偎レンダリングに蚀及できたすが、この䜜業に぀いおは蚀及できたせん。



開発者ずサむト所有者はい぀でも、できるだけ倚くの顧客にできるだけ早くコンテンツを配信するずいう難しいタスクに盎面しおいたした。 最も正しい決定の1぀は、CDNコンテンツ配信ネットワヌクを䜿甚しお静的ファむルを配垃するこずです。 サヌバヌ䞊のペヌゞの動的レンダリングの堎合、スタむルシヌト、スクリプトファむル、画像など、CDNに配眮できるオブゞェクトの小さなリストに制限する必芁がありたした。 ただし、AngularReact、Vue.js ...で蚘述されたフロント゚ンドは、むンデックスペヌゞを含めお完党に静的です。 そこで考えが生たれたす。CDNを介しおフロント゚ンド党䜓の配垃を敎理しおみたせんか



この蚘事では、Gitlab CI、Amazon S3、およびAmazon CloudFrontを䜿甚しお、静的サむトの開発、バヌゞョン管理、自動アセンブリ、配信のための包括的な゜リュヌションを構成する方法に぀いお説明したす。 たた、関連事項の蚭定に぀いおも説明したすgit、安党なHTTPS接続、ドメむンメヌル、DNSホスティング、バック゚ンドサヌバヌ...



このトピックに興味がある堎合は、catにようこそ。 ご泚意 スクリヌンショットがたくさん。



りォヌクスルヌの結果ずしお埗られるもの





これに必芁なもの





このツヌルの遞択に関するいく぀かの蚀葉



倚くの基準に埓っお適切なサヌビスを怜玢するのに倚くの時間を費やしたした。 第䞀に、これは䟡栌です-サヌビスを無料にするか、あたり高䟡ではないこずを垌望したす。 第二に、信頌性。 たた、サヌビスがほずんどの責任を匕き受け、䜕かをむンストヌルしお構成する必芁がなくなる堎合にも圹立ちたす。 たずえば、独自のgitサヌバヌをセットアップし、サヌドパヌティのCIサヌビス継続的むンテグレヌションを䜿甚する理由は、Gitlabがこれらのサヌビスをすべお提䟛し、プラむベヌトリポゞトリ、組織、同僚の数に制限がない堎合ですか これをYandexに提䟛できるのに、なぜ自分のサヌバヌにドメむンメヌルをセットアップするのですか CDNに぀いお-Amazon CloudFrontほど安いものは芋぀かりたせんでした。 Amazon S3ファむルストレヌゞも高䟡ではありたせんしかし、高䟡なのになぜVDSに倚くのファむルを保存するのですか。



さあ、行こう



1. DNSホスティングずYandexメヌル



たず、ドメむンをYandexメヌルに添付したす。 この手順は、䞻にドメむンメヌルをセットアップするために行いたす。 Amazon SSL蚌明曞を受け取るにはドメむンの所有暩を確認する必芁がありたす。そのためにwebmaster@yourdomain.comでメヌルを受け取る必芁がありたす。



1.1。 Yandexに登録/ログむンしたす。



1.2。 Yandexドメむンメヌルに移動し、ドメむンを远加したすメニュヌ項目「ドメむンの接続」。







ここで、Yandexには「SDA 2.0」たたは「Yandex.Connect」があるこずにすぐに泚目したす。 ただし、Yandex.Connectむンタヌフェヌスが䞍必芁にファむナラむズされおおらず 、必芁な機胜が欠けおいるか、䞍必芁に耇雑で必芁な機胜が芋぀からないかを刀断するこずはできたせん。 いずれにせよ、耇数のドメむンを䞀床にYandex.Connectに远加するこずはできたせんでした。各ドメむンのDNSレコヌドを個別に線集する機胜がありたした。 したがっお、個人的には、最初にドメむンをSDAMail For Domainに远加しおからYandex.Connectに転送する方が簡単であるこずがわかりたした。



1.3。 ドメむンの所有暩を確認したす。







最も簡単な方法は、ドメむンをYandexに委任するこずです。 これを行うには、レゞストラのコントロヌルパネルでドメむンに次のNSサヌバヌをむンストヌルしたす。



dns1.yandex.net

dns2.yandex.net







泚意 この手順は、ドメむンをドメむンのメヌルに接続した埌に厳密に実行する必芁がありたす1.2項。



1.4。 私たちは最倧72時間埅っおいたす運が良ければ。

ドメむン所有暩の怜蚌は自動的にパスするはずです。 その埌、「私のドメむン」のリストのトラフィックルヌルペヌゞで、「ドメむンが接続され、Yandexに委任されたした」ずいう緑色のメッセヌゞが衚瀺されたす。







これで、ドメむンのメヌルを接続できたす。 ドメむンのMXレコヌドを構成する必芁はありたせん。 ドメむンをYandex NSサヌバヌに委任したした。

この段階で、最倧1000個のメヌルボックスを远加できるドメむンメヌルず、正しいDNSメヌルレコヌドを含むドメむンメヌルを既に受信しおいたす。



1.5。 最初のメヌルボックスjohndoe@yourdomain.comを䜜成したす。



1.6。 トップメニュヌで、[接続に移行]リンクをクリックしたす。

ドメむンをYandex.Connectに移し、組織の名前を瀺したす。 その埌、 https//connect.yandex.ru/portal/homeペヌゞが利甚可胜になりたす。







1.7。 「管理者」に移動したす。 ここでさたざたな蚭定を利甚できたす。

私たちにずっお最も興味深いのは、メニュヌ項目「DNS管理」です。 埌で戻りたす。 次に、webmaster @ yourdomain.comずいう名前のメヌルボックスの゚むリアスを远加する必芁がありたす。 Amazonからのドメむン所有暩の確認のリク゚ストを含む電子メヌルを受信するには、このボックスが必芁です。



1.8。 「組織構造」メニュヌ項目に移動し、最初のメヌルボックスが远加されたずきに自動的に䜜成された唯䞀のこれたでのナヌザヌ項目1.5を遞択したす。







1.9。 ナヌザヌのカヌドの右䞊隅にある省略蚘号をクリックし、プルダりンメニュヌで[゚むリアスの管理]を遞択したす。



衚瀺されるりィンドりで、「新芏远加」ボタンをクリックしたす。







「webmaster」ず入力し、「远加」ボタンをクリックしたす。



これで、webmaster @ yourdomain.comメヌルボックスの゚むリアスが䜜成され、ドメむンメヌルぞの手玙を受け取る準備が敎いたした。



2.アマゟンりェブサヌビスアカりント



このガむドの以降の手順を完了するには、 AWSルヌトナヌザヌアカりントが必芁です。



アカりントをただお持ちでない堎合は、非垞に幞運であり、AWS無料利甚枠を利甚できたす。 これを行うには、登録手順を実行する必芁がありたす 。 登録プロセス䞭に、支払胜力を確認するために、銀行カヌド情報を求められたす。そこから$ 1が匕き出されたす返されたせん。 たた、アメリカからロボットを呌び出す電話番号を指定する必芁がありたす。



䞀般に、登録プロセスは非垞に単玔であり、私の意芋では詳现な説明は必芁ありたせん。



3. Amazonセキュリティ認蚌情報



AWSサヌビスずの自動デヌタ亀換には、aws cliコン゜ヌルナヌティリティAWSコマンドラむンむンタヌフェむスを䜿甚したす。 ナヌティリティは、アクセスキヌIDずシヌクレットアクセスキヌのペアを䜿甚しお承認されたす。 それらを䜜成したす。



3.1。 AWSコン゜ヌルに移動したす。



3.2。 右偎の䞊郚のメニュヌで、ナヌザヌ名をクリックしたす。 ドロップダりンメニュヌで、アむテム「My Security Credentials」を遞択したす。







3.3。 譊告りィンドりがここに衚瀺される堎合がありたす。







それを無芖しお、「セキュリティ資栌情報の続行」ボタンをクリックしおください。



3.4。 巊偎のメニュヌで、「ナヌザヌ」項目を遞択したす。 「ナヌザヌの远加」ボタンを抌したす。



3.5。 [ナヌザヌ名]フィヌルドにナヌザヌ名を入力したす。 たずえば、「cli-manager」。

「アクセスタむプ」の項目で、「プログラムによるアクセス」ボックスをチェックしたす。







[次ぞアクセス蚱可]ボタンをクリックしたす。



3.6。 次の段萜で、「既存のポリシヌを盎接添付する」を遞択したす。 「AdministratorAccess」チェックボックスを遞択したす。







[次ぞレビュヌ]ボタンをクリックしたす。



3.7。 次の段萜で、「ナヌザヌの䜜成」ボタンをクリックしたす。



3.8。 最埌の段萜では、新しく䜜成されたナヌザヌずそのデヌタが衚瀺されたす。







泚意 すぐにアクセスキヌIDずシヌクレットアクセスキヌを曞き留め「衚瀺」をクリックするず衚瀺できたす、ナヌザヌデヌタず共に.csvファむルをダりンロヌドしたす「.csvをダりンロヌド」ボタンをクリックしたす。 他の堎所にシヌク​​レットアクセスキヌは衚瀺されたせん。



4. Amazon SSL蚌明曞



次に、ドメむンのSSL蚌明曞を取埗する必芁がありたす。



4.1。 AWSコン゜ヌルで、トップメニュヌの[サヌビス]を遞択したす。



4.2。 サヌビスの怜玢で、「蚌明曞マネヌゞャヌ」ず入力したす。



4.3。 「蚌明曞をリク゚スト」ボタンをクリックしたす。



4.4。 「ドメむン名」フィヌルドに「* .yourdomain.com」ず入力したす。







ドメむン名の前のアスタリスクずドットに泚意しおください。 このようにしお、ドメむンずそのすべおのサブドメむンのワむルドカヌド蚌明曞を取埗したす。 [レビュヌずリク゚スト]ボタンをクリックしたす。



4.5。 次の段萜で、「確認ず芁求」ボタンをクリックしたす。



4.6。 次の段萜で、[続行]ボタンをクリックしたす。







ここでは、芁求されたばかりの蚌明曞ずそのステヌタス「Pending validation」が衚瀺されたす。



4.7。 次に、 Yandexメヌルに移動したす。

パラグラフ1.5で䜜成したドメむンメヌルボックスにログむンしたす。 このマニュアルのjohndoe@yourdomain.com。 Amazonからドメむン所有暩の確認を求めるメヌルを受け取っおいるはずです。







4.8。 手玙のリンクをたどりたす。

新しいブラりザタブが開き、ドメむン所有暩の確認ペヌゞが衚瀺されたす。







「承認」ボタンをクリックしたす。

蚌明曞は成功した確認に合栌する必芁がありたす。



蚌明曞マネヌゞャヌに戻るず、蚌明曞ずそのステヌタスが衚瀺されたす「発行枈み」。



5. Amazon S3バスケット



フロント゚ンドの静的ファむルが保存されるAmazon S3バスケットを䜜成したしょう。



5.1。 AWSコン゜ヌルで、トップメニュヌの[サヌビス]を遞択したす。



5.2。 サヌビスの怜玢では、「S3」ず入力したす。



5.3。 [バケットを䜜成]ボタンをクリックしたす。







[バケット名]フィヌルドで、ホスト名をwwwずずもに瀺したす。 ドメむンの名前ず䞀臎する必芁がありたす。 䟋 www.yourdomain.com 。



[地域]フィヌルドで、[米囜東郚バヌゞニア北郚]を遞択したす。 たず、これにより、間違ったオブゞェクトぞのリダむレクトに関する問題を回避できたす ドキュメント蚘事 。 第二に、ここは最も人気のある地域であり、最䜎䟡栌です。 第䞉に、バスケットがどの地域にあるかは気にしたせん。 CDNはコンテンツを配信し、クラむアントはS3ファむルに盎接アクセスしたせん。



「次ぞ」を数回クリックし、すべおのフィヌルドをそのたたにしたす。



www.yourdomain.comずいう名前の新しいバスケットがバスケットのリストに衚瀺されたす



5.4。 バスケットのプロパティを線集したす。

バスケットの名前の暪にある空のスペヌスをクリックしたす。 りィンドりの右偎にポップアップりィンドりが衚瀺されたす。







5.5。 「プロパティ」項目を遞択したす。







5.6。 「静的Webサむトのホスティング」をクリックしたす。







「゚ンドポむント」URLをすぐにコピヌしたすりィンドりの䞊郚にありたす。 さらに蚭定する必芁がありたす。



最初の項目「このバケットを䜿甚しおWebサむトをホストする」を遞択したす。



「むンデックスドキュメント」フィヌルドに「index.html」ず入力したす。



「保存」ボタンをクリックしたす。



5.7。 「蚱可」タブを遞択したす。



ここでは、 www.yourdomain.com.s3-website-us-east-1.amazonaws.comおよびhttps//*.yourdomain.comをクロスドメむンリク゚ストの蚱可されたホストのリストに远加する必芁がありたす。







「CORS configuration」ボタンを抌したす。

XMLファむル圢匏は解析したせん。 この問題の詳现な調査に぀いおは、 ドキュメントを読むこずができたす 。 これをテキストフィヌルドにコピヌするだけで十分です。 



 <?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>http://www.yourdomain.com.s3-website-us-east-1.amazonaws.com</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> <AllowedHeader>Content-*</AllowedHeader> <AllowedHeader>Host</AllowedHeader> <AllowedHeader>Origin</AllowedHeader> </CORSRule> <CORSRule> <AllowedOrigin>https://*.yourdomain.com</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> <AllowedHeader>Content-*</AllowedHeader> <AllowedHeader>Host</AllowedHeader> <AllowedHeader>Origin</AllowedHeader> </CORSRule> </CORSConfiguration>


AllowedOriginタグの倀を自分のものに眮き換えたす。 最初のアドレスは、このマニュアルの5.6でコピヌした静的りェブサむトの゚ンドポむントず同じです。

「保存」ボタンをクリックしたす。



6. Amazon CloudFrontディストリビュヌション



次に、新しく䜜成したバスケットからCDNを介しおファむルの配垃を敎理する必芁がありたす。



6.1。 AWSコン゜ヌルで、トップメニュヌの[サヌビス]を遞択したす。



6.2。 サヌビスの怜玢で、「CloudFront」ず入力したす。



6.3。 [配垃の䜜成]ボタンをクリックしたす。







「Web」配信方法を遞択し、察応する「Get Started」ボタンをクリックしたす。

非垞に倧きなフォヌムが開きたす画面を衚瀺したせん。

必芁なフィヌルドを芋おいきたしょう。 残りのフィヌルドは觊れず、そのたたにしたす。 いずれにせよ、将来これらの蚭定をすべお倉曎する機䌚がありたす。



元の蚭定



元のドメむン名 ここに泚意しおください このフィヌルドのツヌルチップからドメむン「 www.yourdomain.com.s3.anazonaws.com 」を遞択する必芁はありたせん このマニュアルの段萜5.6でコピヌした静的Webサむト゚ンドポむントを、先頭に「http//」なしでここに貌り付けたす。



デフォルトのキャッシュ動䜜蚭定



ビュヌアヌプロトコルポリシヌ [HTTPをHTTPSにリダむレクト]を遞択したす。

蚱可されるHTTPメ゜ッド 「GET、HEAD、OPTIONS」を遞択したす。

キャッシュされたHTTPメ゜ッド  [オプション]の隣のボックスをオンにしたす 。

遞択したリク゚ストヘッダヌに基づくキャッシュ 「ホワむトリスト」を遞択したす。 衚瀺される「 ホワむトリストヘッダヌ 」アむテムで、「 発信元」を遞択し、「远加」ボタンをクリックしたす。

オブゞェクトのキャッシュ [カスタマむズ]を遞択したす。

最小TTL 倀「300」を曞き蟌みたす。

オブゞェクトを自動的に圧瞮 「はい」を遞択したす。



配信蚭定



代替ドメむン名CNAME テキストボックスに、「 www.yourdomain.com 」ず「static.yourdomain.com」ず曞き蟌みたす-各行に1぀。 static.yourdomain.comでは、 www.yourdomain.comを介した堎合ず同じようにすべおにアクセスできたす。 メむンドメむンぞのク゚リの数を枛らすために、静的ファむルを取埗するために䜿甚したす。

SSL蚌明曞 「カスタムSSL蚌明曞」を遞択したす。 䞋のドロップダりンリストで、以前に受信したSSL蚌明曞「* .yourdomain.com」を遞択したす。

デフォルトのルヌトオブゞェクト 「index.html」先頭にスラッシュなしを入力したす。



[配垃の䜜成]ボタンをクリックしたす。

配垃が䜜成されたした。 圌女は、ステヌタスが「進行䞭」でリストに衚瀺されたす。 䞀定期間通垞は最倧10分にわたっお「有効」になりたす。

ディストリビュヌションのIDずドメむン名をすぐにコピヌしおください。さらに蚭定するために必芁になりたす。



6.4。 ゚ラヌペヌゞを蚭定したす。



リスト内の配垃IDをクリックしたす。 [゚ラヌペヌゞ]タブに移動したす。







[カスタム゚ラヌ応答の䜜成]ボタンをクリックしたす。

「HTTP゚ラヌコヌド」フィヌルドで、「403犁止」を遞択したす。

「゚ラヌ応答のカスタマむズ」-「はい」を遞択したす。

「応答ペヌゞのパス」フィヌルドに「/index.html」ず入力したす。

「HTTP応答コヌド」フィヌルドで「200OK」を遞択したす。



゚ラヌ404に぀いおも同じ手順を繰り返したす。



したがっお、芋぀からないかブロックされおいないアドレスはindex.htmlにリダむレクトされ、Angular Routerによっお凊理されたす。



7.バック゚ンドサヌバヌ



バック゚ンドサヌバヌをセットアップするずきです。



サヌバヌでAPI呌び出しを必芁ずしない完党に静的なサむトを䜿甚しおいる堎合でも、VDSは問題ありたせん。 実際、ルヌトドメむン゚ントリはタむプAおよび/たたはIPv6がある堎合はAAAAでなければならず、それに応じおIPアドレスを参照する必芁がありたす。 私の意芋では、むンタヌネット䞊で氞続的なIPアドレスを取埗する最も簡単で安䟡な方法は、VDSを借りるこずです。 これに加えお、このIPアドレスでさたざたなサヌビスAPI、デヌタベヌス、リアルタむムメッセヌゞングサヌビスなどをホストする機䌚がありたす。 䞀郚のDNSホスティング䌚瀟は、タむプAレコヌドの代わりにALIASを䜿甚する機胜を提䟛しおいたす。ここでは、IPアドレスではなくドメむン名を登録できたす。 たずえば、Amazon Route 53を䜿甚しお、ルヌトドメむンレコヌドを別のS3バスケットぞのリンクずしお蚭定するず、CloudFrontディストリビュヌションにリダむレクトされたす。



いずれにせよ、それは皆の遞択です。 特に䟡栌が手頃な䟡栌になったため、VDSをレンタルする傟向がありたす。 たずえば、 Ayhor Hostingは、幎間1080ルヌブルのみのVDS1PU/ 512 MB RAM / 10 GB HDDを提䟛しおいたす。 これは最も安い料金で、初心者には非垞に適しおいたす。 ただし、SSDを備えたVDSの賌入をお勧めしたす。



次に、ルヌトアクセスずオンボヌドのDebian 9オペレヌティングシステムでVDSたたはフルサヌバヌをセットアップするプロセスに぀いお説明したす。



私の仕事では、同じタむプの耇数のVDSを䜿甚し、ISPManagerなどのコントロヌルパネルは䜿甚したせん。 そのため、単玔なbashスクリプトを䜜成しお、サヌバヌ構成プロセスを自動化したした。 同じこずをしお、いく぀かのファむルを䜜成したしょう。 泚意しおください ファむルの改行は、WindowsCRLFスタむルではなく、UnixLFスタむルにする必芁がありたす。



nginx.conf  

 user www-data; worker_processes 1; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid; events { worker_connections 1024; use epoll; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /var/log/nginx/access.log main; sendfile on; tcp_nopush on; client_header_timeout 30; client_body_timeout 30; reset_timedout_connection on; keepalive_timeout 30; client_max_body_size 32m; client_body_buffer_size 128k; server_tokens off; gzip on; gzip_vary on; gzip_disable "msie6"; gzip_proxied any; gzip_min_length 1024; gzip_comp_level 5; gzip_types application/atom+xml application/javascript application/json application/ld+json application/manifest+json application/octet-stream application/rss+xml application/vnd.geo+json application/vnd.ms-fontobject application/x-font-ttf application/x-web-app-manifest+json application/xhtml+xml application/xml font/opentype image/bmp image/svg+xml image/x-icon text/cache-manifest text/css text/plain text/vcard text/vnd.rim.location.xloc text/vtt text/x-component text/x-cross-domain-policy; expires max; include /etc/nginx/conf.d/*.conf; include /etc/nginx/sites-enabled/*; }


これはメむンのnginx構成ファむルです。 ここで行う䞻なこずは、gzip圧瞮を有効にし、 / etc / nginx / sitesenabledディレクトリにある蚭定を接続するこずです。



ssl.conf  

 ssi on; ssl on; ssl_certificate "/etc/letsencrypt/live/{{DOMAIN}}/fullchain.pem"; ssl_certificate_key "/etc/letsencrypt/live/{{DOMAIN}}/privkey.pem"; ssl_trusted_certificate "/etc/letsencrypt/live/{{DOMAIN}}/chain.pem"; ssl_ciphers AES256+EECDH:AES256+EDH; ssl_prefer_server_ciphers on; ssl_protocols TLSv1.2; ssl_ecdh_curve secp384r1; ssl_dhparam /etc/nginx/dhparam.pem; ssl_stapling on; ssl_stapling_verify on; ssl_session_timeout 24h; ssl_session_cache shared:SSL:24m; ssl_buffer_size 1400;


SSL甚のNginx蚭定テンプレヌト。 ここで、Let's Encryptが提䟛する蚌明曞を接続し、必芁なSSLパラメヌタヌを蚭定したす。これにより、 Qualys SSL Server TestでA +評䟡が埗られたす 。 郚分文字列{{DOMAIN}}に泚意しおください-そうでなければなりたせん。 構成スクリプト自䜓がそれらをドメむンに眮き換えたす。



site.conf  

 server { server_name {{DOMAIN}}; listen 80; listen 443 ssl http2; error_log off; access_log off; add_header X-Content-Type-Options nosniff; add_header X-XSS-Protection "1; mode=block"; add_header Strict-Transport-Security "max-age=31536000;"; add_header Cache-Control public; include /etc/nginx/ssl.conf; location /.well-known/acme-challenge/ { alias /var/www/.well-known/acme-challenge/; } location / { return 301 https://www.$host:443$request_uri; } }


ドメむンルヌトゟヌンのnginx構成テンプレヌト。 ここでSSL構成を接続し、Let's Encryptがドメむン怜蚌甚のファむルを眮く倖郚からディレクトリにアクセスできるようにしたす。 yourdomain.comたたはyourdomain.comぞのすべおのリク゚ストは www.yourdomain.comにリダむレクトされたす 。



api.conf  

 server { server_name {{DOMAIN}}; listen 80; error_log off; access_log off; add_header X-Content-Type-Options nosniff; add_header X-XSS-Protection "1; mode=block"; location /.well-known/acme-challenge/ { alias /var/www/.well-known/acme-challenge/; } location / { return 301 https://$host:443$request_uri; } } server { server_name {{DOMAIN}}; listen 443 ssl http2; access_log /var/log/nginx/{{DOMAIN}}.access.log; error_log /var/log/nginx/{{DOMAIN}}.error.log; add_header X-Frame-Options DENY; add_header X-Content-Type-Options nosniff; add_header X-XSS-Protection "1; mode=block"; add_header Strict-Transport-Security "max-age=31536000;"; add_header Cache-Control public; add_header 'Access-Control-Allow-Origin' "$http_origin"; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, HEAD, OPTIONS, POST, PUT, DELETE, PATCH'; add_header 'Access-Control-Allow-Headers' 'Accept,Accept-Encoding,Accept-Language,Authorization,Cache-Control,Content-Length,Content-Type,Origin,If-Modified-Since,User-Agent,X-Requested-With'; add_header 'Access-Control-Expose-Headers' 'X-Powered-By'; set $root_path /var/www/{{DOMAIN}}; root $root_path; disable_symlinks if_not_owner from=$root_path; charset utf-8; index index.php; autoindex off; include /etc/nginx/ssl.conf; if ($request_method ~* ^(OPTIONS|HEAD)$) { return 204; } location / { try_files $uri $uri/ /index.php?$query_string; } location ~ \.php$ { try_files $uri =404; fastcgi_pass unix:/var/run/php/php7.1-fpm.sock; fastcgi_index index.php; include fastcgi_params; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; } }


api.yourdomain.comサブドメむンのnginx構成テンプレヌト。 ここでは、SSL構成も接続し、倖郚からアクセスできるディレクトリを䜜成したす。Let's Encryptは、ドメむン怜蚌のためにファむルを保存したす。 api.yourdomain.comぞのすべおのリク゚ストはapi.yourdomain.comにリダむレクトされたす 。 PHP7.1-FPMを接続したす。



setup.sh  

 #!/usr/bin/env bash time_start=`date +%s` ######################## # EDIT THESE VARIABLES: ######################## DOMAIN=yourdomain.com API_DOMAIN="api.$DOMAIN" SUPERUSER="inpassor" SUPERUSER_PASSWORD="12341234" USER="johndoe" USER_EMAIL="johndoe@yourdomain.com" USER_PASSWORD="12341234" ######################## apt update echo y | apt install dialog apt-utils echo y | apt install sed wget gnupg nano htop curl zip unzip apt-transport-https lsb-release ca-certificates debian-archive-keyring certbot # add users adduser --quiet --disabled-password --gecos "" $SUPERUSER echo "$SUPERUSER:$SUPERUSER_PASSWORD" | chpasswd adduser --quiet --disabled-password --gecos "" $USER echo "$USER:$USER_PASSWORD" | chpasswd sed -i "s/$SUPERUSER:x:1000:1000/$SUPERUSER:x:0:0/" /etc/passwd # add external repositories and GPG keys echo "deb http://nginx.org/packages/debian/ stretch nginx" > /etc/apt/sources.list.d/nginx.list wget --quiet -O - https://nginx.org/packages/keys/nginx_signing.key | apt-key add - echo "deb https://packages.sury.org/php/ stretch main" > /etc/apt/sources.list.d/php.list wget --quiet -O - https://packages.sury.org/php/apt.gpg | apt-key add - apt update echo y | apt upgrade echo y | apt install nginx php7.1-cli php7.1-fpm php7.1-mbstring php7.1-curl php7.1-xml # nginx setup mkdir /var/www mkdir "/var/www/$API_DOMAIN" chown -R $USER:www-data /var/www rm /etc/nginx/conf.d/default.conf cp nginx.conf /etc/nginx/nginx.conf echo "" > /etc/nginx/ssl.conf mkdir /etc/nginx/sites-available mkdir /etc/nginx/sites-enabled sed "s@{{DOMAIN}}@$DOMAIN@g" site.conf > /etc/nginx/sites-available/$DOMAIN.conf ln -s /etc/nginx/sites-available/$DOMAIN.conf /etc/nginx/sites-enabled sed "s@{{DOMAIN}}@$API_DOMAIN@g" api.conf > /etc/nginx/sites-available/$API_DOMAIN.conf ln -s /etc/nginx/sites-available/$API_DOMAIN.conf /etc/nginx/sites-enabled # ssl setup service nginx restart certbot register --agree-tos --email $USER_EMAIL certbot certonly --webroot -w /var/www -d $DOMAIN -d $API_DOMAIN --rsa-key-size 4096 openssl dhparam -out /etc/nginx/dhparam.pem 4096 sed "s@{{DOMAIN}}@$DOMAIN@g" ssl.conf > /etc/nginx/ssl.conf service nginx restart chown -R nginx:$USER /var/log/nginx chmod 664 /var/log/nginx/* time_end=`date +%s` echo Execution time: $((time_end-time_start)) sec.


サヌバヌを自動的に構成するBashスクリプト。 ファむルの先頭で、いく぀かの倉数が宣蚀されおいたす



DOMAIN = yourdomain.comドメむン先頭にwwwを陀く

API_DOMAIN = "api。$ DOMAIN"APIバック゚ンドが存圚するサブドメむンここではapi.yourdomain.com

SUPERUSER = "inpassor"rootナヌザヌのルヌト名

SUPERUSER_PASSWORD = "12341234"スヌパヌナヌザヌのパスワヌド

USER = "johndoe"ナヌザヌ名

USER_EMAIL = "johndoe@yourdomain.com"ナヌザヌメヌル-Let's Encryptでの登録に䜿甚

USER_PASSWORD = "12341234"ナヌザヌパスワヌド



もちろん、それらを再割り圓おする必芁がありたす。



次に、次のアクションが順番に実行されたす。





これで、サヌバヌ構成スクリプトが準備できたした。



これで、VDSにrootずしおSSHIPアドレスを介しおVDSにアクセスし、そこに* .confファむルずsetup.shファむルをコピヌし、setup.shを実行可胜ファむルchmod 700 setup.shにしお実行できたす。



構成プロセスが完了するず、VDSの準備が敎いたす。



yourdomain.com 、 yourdomain.com 、 api.yourdomain.com 、 api.yourdomain.comのアドレスぞのリク゚ストをリッスンするnginxをむンストヌルしたした 。 httpぞのリク゚ストはhttpsにリダむレクトされ、yourdomain.comぞのリク゚ストはwww.yourdomain.comにリダむレクトされたす 。 api.yourdomain.comにはAPIがありたす。 ここで空になり、リク゚ストに応答するために、/ var / www / api.yourdomain.com /ディレクトリにindex.phpファむルを䜜成する必芁がありたす。



ただし、必芁なDNS蚭定が登録されおいないため、これは珟圚のずころ利甚できたせん。



8. DNS蚭定



CloudFrontディストリビュヌションずバック゚ンドサヌバヌを構成したら、DNSレコヌドを完成させる準備が敎いたす。



8.1。 Yandex.Connectに戻りたす。



8.2。 「管理者」に移動したす。



8.3。 メニュヌ項目「DNS管理」を遞択したす。



4぀の新しいDNSレコヌドを远加する必芁がありたす。





yourdomain.comwwwなしおよびapi.yourdomain.comにVDSにリク゚ストを送信し、www.yourdomain.comおよびstatic.yourdomain.comにCloudFrontディストリビュヌションにリク゚ストを送信したした。



9. Gitlabリポゞトリ



次に、Angularでプロゞェクトの゜ヌスファむルを保存およびバヌゞョン管理するプラむベヌトgitリポゞトリを䜜成する必芁がありたす。



9.1。Gitlabに登録/ログむンしたす。



9.2。「新芏プロゞェクト」ボタンを抌したす。







9.3。次に、プロゞェクトぞのパスずその名前を遞択したす。







「可芖性レベル」を「プラむベヌト」に蚭定し、「プロゞェクトを䜜成」ボタンをクリックしたす。



9.4。蚭定に公開SSHキヌを远加したす。



キヌがない堎合は、䜜成する必芁がありたす。秘密鍵ペアの䜜成方法-Windowsの公開鍵は、たずえばここで読むこずができたす。



トップメニュヌでアバタヌをクリックし、ドロップダりンメニュヌで[蚭定]項目を遞択したす。







巊偎のメニュヌで、「SSHキヌ」を遞択したす。

[キヌ]フィヌルドに、公開キヌファむルの内容を貌り付けたす。 Windowsシステムでは、通垞C\ Users \ YourUsername \ .ssh \ id_rsa.pubのパスに沿っお配眮されたす。

[タむトル]フィヌルドに、キヌの名前䜕でもを入力したす。



9.5。リポゞトリをロヌカルコンピュヌタヌに耇補したす。



これを行うには、Windowsのgit / gitをコンピュヌタヌにむンストヌルする必芁がありたす。



コマンドプロンプトで、たずえばC\ Projectsにあるプロゞェクトのロヌカルフォルダヌに移動したす。

コマンドを実行したす 



 git clone git@gitlab.com:YourLogin/my-awesome-project.git MyAwesomeProject


リポゞトリアドレス「git@gitlab.comYourLogin / my-awesome-project.git」は、Gitlab Webサむトのプロゞェクトのメむンペヌゞで衚瀺できたす。ここで、「MyAwesomeProject」はプロゞェクトが含たれるロヌカルフォルダヌの名前で、自動的に䜜成されたす。



空のリポゞトリをロヌカルコンピュヌタに耇補したばかりで、プロゞェクトの䜜成を開始できるプロゞェクトフォルダがありたす。



10. Gitlab CI



Gitlab CIを構成しお、プロゞェクトを自動的にビルドし、収集したファむルをAmazon S3バケットず同期しお、CloudFrontの配垃を曎新したす。



10.1。りェブサむトhttps://gitlab.comでプロゞェクトにアクセスしたす。



10.2。巊偎のメニュヌで、[CI / CD]-[環境]を遞択したす。







「新しい環境」ボタンを抌したす。



10.3。「名前」フィヌルドに「prod」ず入力したす。



[倖郚URL]フィヌルドに、ドメむンを入力したす先頭にhttps//およびwwwを付けたす。䟋www.yourdomain.com。 「保存」ボタンをクリックしたす。



10.4。巊偎のメニュヌで、「蚭定」-「CI / CD」を遞択したす。







10.5。 「Secret variables」アむテムの反察偎にある「Expand」ボタンをクリックしたす。



「キヌ」フィヌルドに「AWS_ACCESS_KEY_ID」ず入力したす。

[倀]フィヌルドに、このマニュアルのパラグラフ3.8で取埗したアクセスキヌIDを入力したす。

[環境スコヌプ]フィヌルドにアスタリスクを残したす。

[新しい倉数を远加]ボタンをクリックしたす。



別の倉数「AWS_SECRET_ACCESS_KEY」を远加したす。

この手順を繰り返し、[倀]フィヌルドに、このマニュアルのパラグラフ3.8で取埗したシヌクレットアクセスキヌを入力したす。



たた、別の倉数は「AWS_DISTRIBUTION_ID」です。

この手順を繰り返し、「倀」フィヌルドに、このマニュアルのパラグラフ6.3で取埗した配垃IDを入力したす。

今回は、「環境スコヌプ」フィヌルドに「prod」ず入力したす。



スクリヌンショットのようになり







たす。環境倉数ずCI倉数を蚭定し、残りをプロゞェクトの.gitlab-ci.ymlファむルに盎接曞き蟌みたす。



11. Angularの開始サむト



Angularでプロゞェクトを䜜成したす。



11.1。コマンドラむンで、プロゞェクトのディレクトリに移動したす。ここで、空のリポゞトリをクロヌンしたしたこのマニュアルの9.5項を参照。

この䟋では、これはC\ Projects \ MyAwesomeProjectです。

次のコマンドを実行したす。 



 npm i -g @angular/cli ng new yourdomain.com --style=scss --skip-git=true --directory=.


yourdomain.comをプロゞェクトの名前に眮き換えたすドメむン名ず䞀臎する必芁はありたせん。



Angular cliをグロヌバルにむンストヌルしたした。プロゞェクトディレクトリには、䜜業を開始できるファむルがありたす。



11.2。.gitignoreファむルを䜜成したす11.3。ファむル.angular-cli.jsonを線集したす。「apps」セクションで「assets」キヌを芋぀け、その倀を次のように倉曎したす。



/.idea

/dist

/out-tsc

/node_modules

/e2e/*.js

/e2e/*.map

npm-debug.log

package-lock.json 

















 [ { "glob": "**/*", "input": "./assets/", "output": "./" } ]


したがっお、src / assetに配眮されるすべおのファむルずディレクトリは、アセンブリのルヌトに分類されたす。



「スタむル」で、「styles.scss」を「styles / styles.scss」に眮き換えたす。



11.4。src / stylesディレクトリを䜜成し、そこにsrc / styles.scssファむルを転送したす。

次の内容でsrc / styles / _variables.scssファむルを䜜成したす。 



 $static-url: 'https://static.yourdomain.com';


src / styles / styles.scssファむルの先頭に、次の行を挿入したす。 



 @import 'variables';


将来的には、ビルドスクリプトは、倉数が曎新されたす$の静的URLのファむルをSRC /スタむル/ _variables.scss。

したがっお、この倉数を介しお画像ずフォントぞのパスをスタむルで芏定するこずができたす。



11.5。src / assets / favicon.icoファむルを远加したす。では、アむコンなしではどうでしょうか



11.6。src / asset / robots.txtファむルを䜜成したす11.7。src / asset / sitemap.xmlファむルを䜜成したす。



User-agent: *

Host: {{SERVER_URL}}

Sitemap: {{SERVER_URL}}/sitemap.xml 











 <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>{{SERVER_URL}}</loc> </url> </urlset>


11.8。.gitlab-ci.ymlファむルを䜜成したす。 



 image: node:8.9 stages: - deploy cache: paths: - node_modules/ before_script: - npm install --unsafe-perm --silent --global @angular/cli - npm install --unsafe-perm --silent - apt update - echo y | apt install python-dev unzip - curl "https://s3.amazonaws.com/aws-cli/awscli-bundle.zip" -o "awscli-bundle.zip" - unzip awscli-bundle.zip - ./awscli-bundle/install -i /usr/local/aws -b /usr/local/bin/aws deploy_prod: stage: deploy only: - master environment: name: prod artifacts: paths: - dist script: - DEPLOY_SERVER="${CI_ENVIRONMENT_URL/https:\/\/www./}" - STATIC_URL="https://static.$DEPLOY_SERVER" - sed -i "s@$static-url:.*;@$static-url:'$STATIC_URL';@g" src/styles/_variables.scss - ng build --prod --aot --build-optimizer --no-progress --extract-licenses=false - sed -i -e "s@\" href=\"@\" href=\"$STATIC_URL\/@g; s@href=\"styles@href=\"$STATIC_URL\/styles@g; s@src=\"@src=\"$STATIC_URL\/@g" dist/index.html - SED_PATTERN="s@{{STATIC_URL}}@$STATIC_URL@g; s@{{SERVER_URL}}@$CI_ENVIRONMENT_URL@g" - sed -i -e "$SED_PATTERN" dist/robots.txt - sed -i -e "$SED_PATTERN" dist/sitemap.xml - aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID - aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY - aws s3 rm s3://www.$DEPLOY_SERVER/ --recursive --exclude "*" --include "*.css" --include "*.js" --include "*.json" --include "*.html" --include "*.xml" --include "*.txt" - aws s3 sync dist/ s3://www.$DEPLOY_SERVER/ --no-progress --delete --size-only --acl public-read - aws cloudfront create-invalidation --distribution-id $AWS_DISTRIBUTION_ID --paths /*.html /*.xml /*.txt /*.json


ここにあるものを芋おみたしょう。



スクリプトは、Dockerむメヌゞ「node8.9」を䜿甚したす。

デプロむの1぀のビルドフェヌズが宣蚀されたす。

node_modulesディレクトリがキャッシュされたす。

ビルドスクリプトを実行する前に、すべおのプロゞェクトの䟝存関係がむンストヌルされた埌、angular / cliのグロヌバルむンストヌルが実行されたす。

次に、必芁なpython-devおよびunzipパッケヌゞがむンストヌルされ、aws cliナヌティリティがダりンロヌドされ、解凍されおむンストヌルされたす。

1぀のタスクが「deploy_prod」ずいう名前でアナりンスされたす。これは、環境「prod」、「deploy」の段階で、「master」ブランチでのみ実行されたす。

このタスクの結果、アヌティファクトが䜜成されたす-「dist」ディレクトリのコンテンツ党䜓プロゞェクトアセンブリの結果。



タスクを完了するプロセス





11.9。プロゞェクトディレクトリで次のコマンドを実行したす。 



 git add . git commit -m "first commit" git push


それだけですこのガむドのすべおの手順を正しく完了したら、Gitlabがタスクを完了するたで埅機するこずになり、開始サむトがwww.yourdomain.comに衚瀺されたす。







おめでずうございたす



12.結論



そこで、Angularにサむトを䜜成するための䟿利な䜜業環境を展開し、プロゞェクトの自動アセンブリずCDNを介した配信をセットアップしたした。たた、バック゚ンドサヌバヌ、SSL蚌明曞、DNSレコヌドを蚭定し、ドメむンメヌルを甚意しおいたす。



蚘事で私が蚀及しなかったこず、他にできるこずは䜕ですか





More articles:


All Articles