すべてのアプリのライフサイクルには、アプリが巣から押し出されて、「私の箱で実行」されて保護できない他の人のマシンの冷たくて気にしない世界に押し込まれなければならない時期があります。 良いニュースは、少なくともMVPの観点からは、展開がかつてないほど容易になったことです。 私たちは1つのコマンドを話している。 .*rcファイルまたは複雑なドキュメントを使用して、慣れ親しんでください。 私たちは物を作り、ボタンを押し、それを共有し、後で汗をかくことを話している。

Surge Now Glitch :テキストエディタとの間のあらゆる摩擦を取り除く独自の長所と特異性を備えた3つの素晴らしいツール世界。

観点から、このツアーでは同じ2つのリポジトリを使用します。 同じアプリの2つのバージョン。1つはNext.jsで作成され、もう1つは Create React AppCLIで作成されています。 どちらもReactを実行しますが、これらのデプロイメントツールはいずれもReact専用ではありません。 重要なのは、Create ReactAppのbuildスクリプトが静的アプリを生成することです。ここで、Next.jsにはそのような出力がなく、より動的なサーバーアーキテクチャに依存しています。 cloneまでお気軽にご自宅でフォローし、forkまでお気軽にご利用ください。

FWIW、これらの悪い男の子は皆無料です。 ✨2つにはプレミアムオプションがあります。

うねり

サージは1つのことを行います:静的アプリを提供します。 CDNを使用して巧妙な方法でそれを行いますが、それは私たちの範囲を超えています。 次のようにグローバルにインストールします。

$ npm i -g surge

Create React App の例でそれを使用して、何かを起動して実行してみましょう。 多くの種類の展開では、ルートディレクトリから覚えやすいsurgeコマンドを実行するだけで十分ですが、CRAのstartスクリプトは、ここでは機能しない開発サーバーを起動します。 代わりに、これとすべてのCRAアプリに対して、npm run buildに続いて次のアプリを起動する必要があります。

$ surge build

わかりやすくするために、buildは、提供するファイルを含むディレクトリです。 そのパラメータは任意のディレクトリである可能性があるため、場所を動詞と混同しないでください。 コマンドを初めて実行するときは、資格情報を指定する必要があります。

A bird's eye view of Surge in action

そこにあります。 ほんの数秒でライブ。 呼び出し後の対話型ダイアログでデプロイメントの名前をカスタマイズできることに注意してください。 プレミアム階層がアプリごとに利用可能であり、カスタムドメインといくつかのより高度な機能を可能にすることも注目に値します。

💣ここでNext.jsをデプロイしようとすると、がっかりします。 次に、その性質上、静的サイトを生成せず、サージで再生されません。

Nowは、Next.jsのメーカーが提供するリアルタイムのデプロイツールです。 結論は、Nextで動作することを知っているということです。 もう1つの結果は、ドッキングされたアプリが含まれているなど、他の多くのものと連携することです。 サージのように、それはインストールを必要とします。 彼らはデスクトップアプリを持っていますが、私たちは私たちの目的のためにモジュールに固執します。

$ npm i -g now

そこから、アプリのルートディレクトリのコマンドラインからnowを呼び出すだけです。 メールを初めて実行するときに確認する必要がありますが、NextリポジトリとCRAリポジトリのどちらで実行する場合でも、デプロイ済みサイトがあります。

Invoking the Now command

URLをクリップボードにコピーするためのボーナスポイント。 🦄

奇妙なニュアンス:Create ReactAppプロジェクトのルートからnowを実行すると実行されますが、取得するのはアプリの開発サーバーレンダリングです。 動作しますが、最適化されていません。 cdbuildディレクトリに配置し、nowを呼び出して、より静的で、きびきびとした、ストリートリーガルバージョンのアプリをデプロイします。

Nowの最後の1つ:無料利用枠にデプロイされたすべてのサイトでは、ユーザーは/_srcをブラウザー内のURLに追加してソースを表示できます。 しかし、待ってください、もっとあります。

Highlighting the source

ソースビューから、ユーザーは誰でもスニペットを強調表示でき、ブラウザのアドレスバーは、強調表示されたソースへの永続的な共有可能なアンカーで更新されます。 プレミアムユーザーは(他の利点とともに)これをオプトアウトできますが、これは非常に優れた機能です。

グリッチ

私たちの最後の供物は少し奇妙な鳥です。 Glitch(nee Gomix; nee HyperDev)は確かに簡単に展開できるプラットフォームですが、それでは短すぎます。 アプリを配信するためのメカニズムを超えて、それはリアルタイムの開発、コラボレーション、およびデプロイメントを可能にするほぼ完全なIDEです。 フルスタックJSコーディング、常時オン、ホットリロード、自動保存、そして美的…完璧さのためにGoogleドキュメントを考えてみてください。

はい、そのインターフェースで最初からコードを書くことができます。 しかし、これが本当に役立つようになるには、コードをインポートする機能が本当に必要です。 問題ない。 このコマンドラインをスキップして、GitHubでサイトログインした後、ブラウザのアドレスバーに移動します。

リポジトリの詳細とともに次のアドレスを使用します。

https://glitch.com/edit/#!/import/github/[YourOrg]/[YourRepo]

私たちのCRAレポでそれをしてください、そしてあなたはお金の中にいます。 実行されます。 編集します。 全部で9つ。 確かに、開発モードで実行されますが、¯\ _(ツ)_/¯。 一方、alligatorio/some-gators-nextで試してみると、エラーが発生します。

Deployment with Glitch

startスクリプトを次のように変更します

'next build && next start'

そしてそれはあなたのアプリをどうするかを知っているでしょう。 ライブ結果。 展開中。

注目すべき点:Glitchには現在プレミアムオプションがなく、ユーザーインターフェイスを介して変更をGitHubにプッシュバックできます。 それらはglitchと呼ばれるブランチに適用されます。

👉Glitchができることのほんの表面をかじっただけです。 しばらくお待ちください。次のハッカソンに備えて検討してください。