NuxtアプリをNetlifyに配備すること

6134 ワード

開発を始めるとき、私たちは多くのことを学ぶ必要があります.新しい言語、新しいフレームワークと新しい概念.私たちは、このほとんどを理解してきたいくつかのクールなデモやアプリを我々は我々が世界にそれを表示するか、それが展開された場合のようになるかを参照してください作成している.

どこから始めますか

それが複雑になる前に.私は私自身のホスティングアカウントを持っていました、そして、私はホスティング問題とアカウントで何度も戦いました、そして、本当に、それは全く楽しみでありませんでした.しかし、最近では多くのオプションがあります.クールライト.
Nuxtには配備のための多くのオプションがあります、そして、私は正直であるために彼らの多くのファンです、しかし、このポストで、私は私のお気に入りについて話します、そして、私が私のウェブサイトを配備するために使用するものについて話します.プラットフォームはNetlify

なぜNetlify？

私にとってNetlifyは多くのスコアに勝っていますが、それについての私のお気に入りのものの一つは、それが無料であること以外に、それは本当に簡単にインターフェイスを使用していることです.私はシンプルなものが好きで、良いものが好きです.そして、私はそれが無料だと言及しましたか?
NetLifyは簡単なことよりも多くのことを行うことができますし、簡単にサイプレスエンドツーエンドのテストやビルドの灯台テストのプラグインを追加することができますし、私もServerless関数に行くことはありません.あなたがNetlifyですることができるくらい、本当にあります.

始める

NetLifyで始めるには、あなたの電子メールを使用してサインアップするか、直接GitHubアカウント、GitLabまたはBitbucketと直接アカウントを作成する必要があります.

もちろんこれらのいずれかを持っていない場合は、私は非常に設定をお勧めしますGitHub account したがって、コードを公開できます.Githubは素晴らしいです、それも無料です.

サイトの追加

一旦あなたのアプリがGitHubレポにあるならば、あなたは簡単にGit 'からボタン'新しいサイトを押して、GitHubを選ぶことによってNetlifyにそれを加えることができます.

これはあなたが許可されていることを確認し、あなたのreposのリストを表示します.そこから、あなたは展開したいものを選ぶことができます.分岐を選択する必要があります.たとえば、機能やdevブランチを展開するだけでよいかもしれませんが、一般的に主またはマスターブランチが必要になります.次に、静的サイトを構築するためにコマンドを設定する必要があります.Nuxt Staticサイトでは、Generateコマンドとフォルダを使用します.

変数

環境変数を使用する必要がある場合は、[詳細]ボタンをクリックしてここに追加できます.あなたがそれを忘れるならば、心配しないでください.後でそれらを常に追加できます.

配備を開始する

「展開サイト」をクリックすると、NetLifyが展開を開始します.分の問題であなたのアプリケーションは、あなたのために生成されるランダムなURLを使用して展開されます.サイトを展開するのを待っている間、ステップ1の下のリンクをクリックし、展開ログをチェックして何が起こっているかを確認します.これは何らかの理由で展開が失敗したかどうかを調べる素晴らしい場所です.

手順は非常に明確であり、あなたのサイトが展開された後、ステップ1が完了し、ステップ2が強調表示されます.2番の下のリンクをクリックしてカスタムドメインを設定できます.ここでは、使用する実際のドメインを追加できる場所です.その後、ステップ3にHTTPSのセットアップに従うことができます.

私はドメインを持っていない

あなたがドメインを持っていない場合、またはおそらくこのプロジェクトのために1つを必要としないが、NetLify自動あなたのために発生しない心配しないURLを持っていないしない心配しないでください.サイト設定ボタンをクリックし、[サイト名の変更]をクリックします.入力ボックスでは、あなたが好きなものを追加することができますし、それが利用可能であればそれはあなたのものです.このドメインは無料です.ネットリファイ.最後にアプリ'が、時にはそれ以上に十分です.

devブランチの配備

メイン/マスターブランチとdevブランチを展開したいならば、あなたはまだそれをすることができます.メインメニューから「展開」をクリックし、[展開]を選択し、[継続的展開]メニューをクリックします.私が行く前に、継続的な展開が自動的にこの段階であなたのために設定され、いつでもあなたがあなたのサイトが展開されるgithubにプッシュを行うとあなたに伝えさせます.
現在、devブランチにも同じことがあります.'展開コンテキスト'で'設定を編集'をクリックします.ここでは'個々のブランチを加えましょう'を選択し、' dev 'のように展開したい枝を選択します.今、あなたはいつでも、あなたのアプリケーションは、あなたがそれを見ることができるとマスターにマージする前に他のユーザーと共有の意味を展開されます.

前の配備のプレビュー

いつでも、以前の展開をプレビューすることができ、展開を再試行して、特定の展開に発行することもできます.あなたが何かを壊して、それを修正する時間がないならば、これは大きな特徴です.ただ修正され、再展開するまでの時間があるまで良いものであった前の展開に戻り、それをロックします.

これらはちょうどNetLifyで行うことができます基本的ないくつかであり、より多くのあなたが探索することができます.しかし、うまくいけば、このポストはNetLifyに展開することがいかに簡単かをあなたに示すでしょう.しかし、まだドラッグしてドロップするだけでも簡単に方法があると確信していない場合.

ドラッグアンドドロップオプション

一度、'生成'コマンドを使用してVSCodeでdistフォルダを生成します.NetLifyのサイトをクリックして、最後にスクロールして、「Glipに接続せずに新しいサイトを展開したい」と言う箱が表示されます.distフォルダーを右クリックし、「Finderで開く」を選択し、ドラッグしてドロップします.