JavaScript Archives - Page 8 of 13 - あさめしコード

NuxtにPiniaをインストールする方法

2024/01/222023/01/12 by Dan

今日はNuxtJSのウェブアプリのプロジェクトに状態管理システムのPiniaをインストールする方法を紹介します。 VueでPiniaを使ったことがある人、Nuxtのコンフィグファイルを触ったことがある人はなんとなくイメージがつかめると思います。 Piniaのインストール Nuxtのプロジェクトが設定できたところで、Piniaの公式サイトの説明に従いインストールを進めていきましょう。コマンドラインから下記の通りPiniaをインストールします。 npmを使っている人はERESOLVE unable to resolve dependency tree errorというエラーが出るかもしれません。その場合は、package.json:に下記の行を追加して、再度試してみて下さい。次に、NuxtのコンフィグファイルにPiniaを登録します。 setup()の外でPiniaを使う場合 Vueの書き方で<script setup>があります。その外でPiniaを使いたい場合はpiniaオブジェクトをuseStore()に渡してあげるようにしましょう。慣習としてプロジェクトのルート直下にstoresディレクトリを作成してPiniaのファイルを格納するようにするようにします。 Piniaファイルを作成ではsotesディレクトリ直下にJSファイルでPiniaを作成します。<script setup>に近い方法で書く方法を紹介しているので参考にしてください。この方法だとJavaScriptのやり方で書けるので見やすいと思いました。イメージとしてはこのような感じになります。お疲れ様です。

Nuxt3にPrimeVueをインストールする方法

2024/01/222023/01/10 by Dan

PrimeVueはVue.jsのUIライブラリでコンポーネントの数が多くお勧めです。今日は、SSR（サーバーサイドレンダリング）ができるVueベースのNuxtライブラリにPrimeVueを使う方法を紹介していきます。 Nuxtのプロジェクトまずは下記のコマンドでNuxt3のプロジェクトを作りましょう。 PrimeVueのインストール次にPrimeVueをインストールします。コンフィグファイルからインポートでは、ライブラリをインストールしたところで、nuxt.config.tsファイルを開きます。デフォルトでは何も記載されていません。ではここにPrimeVueで使うファイルをインポートしていきます。インポートするファイルはPrimeVueの公式ページにあるので必要に応じて確認してください。 Nuxtのプラグインについて Nuxtではpluginsというフォルダーを認識して自動でVueアプリを作成する際にサーバー側でレンダーするかクライアント側でレンダーするか指定することができます。フォルダーの構成はこのようにできます。では公式ドキュメンテーションに従い、ファイルをインポートしていきます。プロジェクトのルート直下にpluginsというフォルダーを作成して、primevue-plugin.jsファイルを作成しましょう。例としてボタンのコンポーネントを使いたい場合はここで登録しておきます。Vueアプリのmain.jsと似たような感じですね。 ripple:trueはボタンなどで使われるアニメーションのことでデフォルトではfalseになっているので必要に応じて上記のようにtrueに設定してください。コンポーネントの作成では、PrimeVueのコンポーネントが登録できたところで、実際にNuxtでボタンを作ってみましょう。 pages/index.vueファイルを作成してデフォルトのランディングページを作成します。詳しいページの作り方はこちらを参考にしましょう。これで、テストサーバーを再起動するとPrimeVueのコンポーネントをFlexがちゃんとロードされていることがわかりましたね。ではお疲れさまでした。

Nuxt.jsを始めよう：ページを追加する

2024/01/222023/01/05 by Dan

前回の記事ではNuxt.jsのセットアップの仕方を説明しました。今日はNuxtを使ってページの追加の仕方、ラウティング（URLの設定）の仕方を説明します。Vueで構築したことがある人は、Nuxtのアプローチの仕方に関心されること間違いなしです。ユニークなレイアウトとroutingの設定方法に驚かされました。 pagesディレクトリ Nuxt.jsのルートディレクトリ（src）と同じ階層にpagesというフォルダを作成してみましょう。その中に例としてabout.vueのファイルを作成します。そうするとNuxtがこのフォルダを読み込みURLのrouting（ラウティング）をしてくれるようになります。テスト用のウェブサーバーを起動してみてください。まるで魔法の様です。しかし、これを読み込んでくれるおかげで、もともとあったapp.vueに変更が必要になります。ではapp.vueを削除して、pagesの直下にindex.vueを作成してください。このファイルがドメインの読み込み時に表示されるランディングページとして表示されるようになります。URLでいうと”/”です。へえ。おもしろいですね。では、URLをもっと複雑に設定したい場合は、pagesディレクトリにさらにフォルダーを作成してその中にvueファイルを作成してみます。 URL/products/index.vueはURL/productsのビューになり、URL/products/item.vueはURL/products/itemのビューになりました。とても直感的です。 routerのパラメーター以前にVue－RouterでURLパラメーターを設定できることを説明しました。URLにダイナミックなデータが入力されたときにそのURLのパラメーターを取得する方法です。例でいうとproducts/1やproducts/2などこの数字がユニークな商品のIDになることがあげられます。このvueファイルは[id].vueの用に作成できます。ファイル名の[]内にダイナミックにしたい名称を入れます。これをuseRoute().paramsで呼び出してあげればOKです。これでダイナミックなURLが完成できましたね。 NuxtLink しかし、このままではユーザーがURLに直接名称を入力しないといけないという非現実的な作業が発生してしまいます。ですのでナビゲーションバーを作成していきます。 NuxtLinkは自動的にインポートされるのでわざわざ<script>からインポートする必要がありません。例としてトップページのpages/inedx.vueに下記の様にNuxtLinkを記載してみましょう。ここで理解しておきたいのが<a>タグを使わないのでVueと同じようにSPAと同じように他のURLにアクセスができます。つまりページがリフレッシュされないのでユーザーエクスペリエンスが向上するということです。レイアウトこのままだとすべてのページにナビゲーションバーを設置しないといけないことになりますね。そこでレイアウトを設定していくことにします。レイアウトはVueでおなじみの<slot/>で解決していきます。ではプロジェクトのルートにlayoutsという名称でフォルダーを作成します。その中にdefault.vueを作成しましょう。 Nuxtが自動でlayouts/default.vueのファイルを監視して、<slot/>内にpageのビューを表示してくれるようになります。カスタムレイアウトでは、ページによってレイアウトが変わる場合はどうすればよいのでしょうか？その場合はlayoutsディレクトリ直下に別のレイアウトとなるvueファイルを作成して対応することができます。例として、アイテムの詳細ページのレイアウトをlayouts/products.vueに作成します。名前は何でも良いです。参考例として内容を下記の様にしてナビゲーションをフッターに移動しました。では、このレイアウトを指定したビューに使えるようにするにはどうすれば良いでしょうか？この場合は、レイアウトを変えたいページのvueファイルに行きdefinePagemeta()を使用します。参考例として、products/index.vueとproducts/[id].vueに下記のmetaを追加しましょう。 products/index.vue products/[id].vue これで、プロダクトページのレイアウトが変わったことが理解できましたね。今日はNuxt.jsでページの使い方、レイアウトの使い方を学びました。お疲れ様でした。

Nuxt.jsを始めよう

2024/01/222023/01/05 by Dan

Reactを使っている人なら聞いたことはあるNext.js。そのVueバージョンがNuxt.jsです。Nuxt.jsはVue.jsをベースに作られたJavaScriptフレームワークです。サーバーサイドレンダリングが可能なので、より早く、SEO対策ができるウェブアプリの開発が可能になります。今日はNuxt.jsのバージョン３について解説していきます。 Nuxt.jsの強み Nuxt.jsの弱みまた、ソースコードはGitHubのリポを確認してください。 Nuxt.jsを始める Nuxtのインストレーションガイドは公式サイトを参考にしました。コマンドでプロジェクトを作成していきます。バージョン３をインストールします。（Node.jsがインストールされていることが前提です。）ではライブラリがインストールされたところでデベロップメント用のサーバーを起動します。これで初期のNuxtのセットアップが完了しました。ファイル構成 nuxt.config.ts nuxt.config.tsはNuxtのコンフィグで使用するファイルでTypeScriptで構成されています。JavaScriptファイルの方が良い場合は.jsに変更することも可能です。このファイルでモジュールの登録やカスタムメタデータの登録をすることができます。また、ここにAPIキーなどのEnvironment Variable（環境変数）を登録することもできます。 app.vue デフォルトのルートコンポーネントになります。デフォルトでは、NuxtWelcomeのコンポーネントがマウントされるようになっていますが、これらのファイルはモジュールに埋め込まれています。Vueの場合はHelloWorldが通常のディレクトリに置かれているのでいちいち削除する必要がありましたがNuxtの場合は無視して削除する必要はありません。npm i でまたインストールされてしまうので。 .nuxt 開発の際にNuxt側で使われるディレクトリです。そのまま放っておいてください。 package.json おなじみのパッケージが一覧で記載されたコンフィグファイルです。npm i で記載されているライブラリがインストールされますね。 Welcomeページを削除ではapp.vueにあるNuxtWelcomeを適当に入れ替えてみます。先ほども記載しましたがWelcomeNuxtのコンポーネントは削除しなくて良いです。これでデフォルトのページがホットリロードされましたね。お疲れ様でした。

JSひろば開発7日目：Vueアプリのデプロイとデザイン

2024/01/222022/12/29 by Dan

JSひろばアプリもほぼ完成に近づいていきました。今日は最終的にvue-routerを入れて、URLで指定したコードのIDをコンソールに貼り付けできるようにします。これで、これからJSのチュートリアルを作成する際にリンクを貼り付けて、そこからサンプリコードを実行できるようにすることが目的です。今後はユーザーがコードを登録できたり、シェアできるようにできたら楽しいなと思います。オープンソースなので皆さんでカスタマイズして試してください。作業日 2022年12月28日作業にかけた時間 6時間合計作業時間 30時間作業内容モジュールインポートエラーの対応favアイコンの作成英語版に対応させるDBモデルの改修Google Analyrticsの追加ローディング画面の設定Vue-routerの追加モジュールインポートエラーの対応 Vueアプリをnpm run buildのコマンドでプロダクション用にコンパイルするとデプロイしようとすると下記のエラーが出ました。調べてみると、npmでインストールしたハイライトのプラグインのCSSをインポートしていることが原因の様でした。rollupでモジュール内のCSSをエクスターナルのファイルとして特例で設定しないといけないようです。 vite.config.jsで下記の様にbuildの部分を追加して再度npm run buildを実行したところ、問題が解決できました。 favアイコンの作成 Adobeのイラストレーターでブックマークに使われるアイコンを作りました。SVGで作成したのでデスクトップのブックマークでも画像がぼやけないようにしました。英語版に対応させる日本語だけだとユーザーが限られるので英語版に対応したアプリにさせます。このようにToggle（トグル）させるボタンをつくりRefでisJapaneseがtrueかfalseかを判定させるようにしました。このデータはPiniaに保管されグローバルにアクセスできるようにしています。 DBモデルの改修では英語版に対応したデータがないのでDjangoのモデルを追加します。英語用のフィールドと難易度をチョイスで追加しました。 Google Analyticsの追加 Google Analyticsを追加しました。特に説明する必要はないと思いますが、headタグ内に用意されたscriptを配置しただけでOKです。　難易度のフィルター次にコマンドの例を初級、中級、上級に分けてソートする機能を付けました。ボタンが順番に表示されるようになり、それに合わせてデータがフィルターされます。 Vue-Routerの追加最後に、データベースから引っ張ってきたコードはIDでURLの最後にくっつけます。これでブログとかでコードを指定して表示させたい場合は、URLでそのまま引用できるようになります。で、検索されたコマンドがペーストされた後に、URLにIDを飛ばしました。 URLを監視する Vue-Routerを使う一番の理由である、URLから目的のコードをコピペされた状態にするということを達成するために、watchEffect()を使いました。これでアプリのイニシャライゼーション（初期読込）の時とURLが変わったときにフェッチしたデータをコンソールにペーストできるようになりました。とりあえず完成とします。あとは、Django側でデータを入れて、JSの記事に使えるか試してみます。お疲れ様です。

JSひろば開発６日目：Vueアプリのデプロイとデザイン

2024/01/222022/12/22 by Dan

前回までの記事では、Djangoをデプロイし実際のドメインからアクセスできるところまで行いました。今日の作業ではバックエンドのDjangoアプリで作成したAPIのエンドポイントとVueのウェブアプリから実際にAPIのリクエストを送りバックエンドからデータをもらえるようにします。あとデザインをキレイにしましょう。作業日 2022年12月16日作業にかけた時間 8時間合計作業時間 24時間作業内容 Djangoに実際のデータを入力VueアプリにAxiosをインストールAPIコールのリスポンスをPiniaに保管実行ボタンの作成アニメーションの設定highlight.jsを設定ではDjangoのアドミンページから実際のデータを入力してAPIのエンドポイントから取得できるようにします。 VueアプリにAxiosをインストール次に、EventService.jsというAPI関連のコールをまとめた別ファイルを作成しました。次にPiniaのファイルにAPIコールのファンクションを保管しておきPiniaが読み込まれたらデータをフェッチするようにします。どこでこのファンクションと発火させるかは後から変更するかもしれません。ここで、APIのGETリクエストを送ると予定通りにCORSポリシーでDjangoからブロックされてしまいました。詳しい対応方法はDjango REST API COR Headersの使い方の記事を参照してください。ではこの記事通りにいったんDjangoのアプリを更新してまた戻ってきましょう。あと、Vue側のアプリケーションのindex.htmlのheadタグ内に下記のmetaを追加しました。 Vueアプリの検証ではAPIの問題が解決したところでこのPrimeVueのターミナルで問題発生。。このUIだと改行ができないことが発覚しました。まあターミナルなのでそうでしょうが。なのでPrimeVueのTextAreaのコンポーネントと入れ替えました。 Vueアプリのデプロイ Vueアプリのデプロイはこの記事を参考にして行いました。これもLet’s EncryptとCertbotを使ってHTTPSからアクセスできるようにしました。とりあえず、Vueアプリがデプロイできるようになりました。後はUIの調整と細かい設定をして完了です！アニメーションで使ったCSSはこちらの記事に書いています。Animistaというサイトです。 highlight.jsの追加このままだと、テキストエディタのように色でハイライトされないので見づらいですね。highlight.jsをインストールしてみます。ここで入力したときと同時に1文字ずつでJavaScriptのキーワードかを判定してハイライトするようにしたかったのですが、うまくいきませんでした。テキストエリアをハイライトさせるのが難しそうでしたので諦めました。しかし、他の方法でコマンドを実行したときにコードがハイライトされるようにできたので良しとします！もし、単純にダイナミックでないコードをハイライトしたいのであればVueのコンポーネントで使えるHighlight.jsのプラグインもあるので試してください。とりあえず今日はここまで！

JSひろばアプリ開発3日目：Vueアプリの全体像

2024/01/222022/12/14 by Dan

前回の記事では、Piniaを入れて大まかなレイアウトを作成しました。今回はPiniaやemit()、テンプレートrefを使うのでVueの要素が盛りだくさんです。今日で大まかなフロントエンドの部分を完了させます！作業日 2022年12月12日作業にかけた時間 3時間合計作業時間 9時間作業内容ボタンのコンポーネントの作成モックのデータを作成グローバルで使うデータをPiniaに保管させるEmitを使いデータを親コンポーネントに送るライブラリコンポーネントのRefにアクセスする 3つのファインダーコンポーネントでは、このJSひろばのアプリのメイン機能としてこの４つのファインダーがありましたがおすすめ検索機能はキーワード検索とほぼ同じなのでいったん取り除くことにしました。これは、ユーザーがJavaScriptのサンプルコードを見つけるための機能になります。ボタンのコンポーネント各ボタンを押すとそれぞれのボタンに付属した内容が同じダイアログ（ポップアップ）のコンポーネント内で表示されるようにします。まずは、各4種類の検索機能のコンポーネントをcomponents/finderフォルダに作成します。最初の中身はただのテキストでOKです。次にApp.vueに戻りPrimeVueにあるDialogコンポーネントをコピペします。それから、各ボタンを押したときにそれぞれのコンポーネントの内容が表示されるようにロジックを作成すればOKです。途中経過ですが、こんな感じになりました。実際の画面はこんな感じです。キーワード検索まだ、データベースの細かい構成とデータの量を吟味していないので詳しくはすすめられません。ここで検討すべき課題はこちらになります。このファインダー機能のコンポーネントは複雑になるので作成はいったん後回しにします。 Piniaの作成 Piniaを使ってグローバルにアクセスできるストレージを作成します。とりあえず、モックのJSONファイルを作成してテーブルとして表示できるところまでやってみます。これを各テーブルで表示させるとこんな感じになりました。履歴のデータを保管する各コマンドを実行した後に、その履歴をオブジェクトの配列に保管します。常に最新の履歴が先に来るようにしたいため、pop()ではなく、unshift()を使っています。コンソール関係のコードはこのような感じです。これで入力したコマンドがオブジェクトとして配列に保管されました。テーブルにも問題なく表示されていることが分かります。コードをコンソールにコピーする機能では、検索機能で探したコマンドをコンソールにコピーするボタンのファンクションを作成していきます。ドキュメンテーションにはないですがこのターミナルがどうやって入力されたテキストをバインドしているか見てみましょう。 VueのGoogleエクステンションツールを使います。 VueのタブからTerminalのコンポーネントを開きます。すると、DataのところにcommandTextがあるのがわかります。ここがnullになっていますがターミナルにテキストが入力されると同時に更新されました。では、このデータにコピーしたいコピーをバインドさせるようにします。まず、ここのcommandTextにアクセスするには＜Terminal ref=”terminal”/>のようにrefを使ってこのコンポーネント内にあるデータ、関数にアクセスすることができますね。（Compostion APIの場合は対象のコンポーネント側でexpose()されて公開されている必要がありますが。）あとは、テーブル側のボタンにemit()を設定して親コンポーネントにコマンドのデータを送ってあげます。親コンポーネント側では、Emitを受け取ったときに発火するイベントを下記の様に設定してあげました。細かいスタイルの変更ここまでできたら、大体のレイアウトは決まったのでスタイルをキレイにしていきます。特に、モバイルとデスクトップで共通のアプリを使えるようにしたいのでその設定も必要です。とりあえずこんな感じになりました。ポップアップで表示されるダイアログは実際のデータが入ってからスタイリングをしたいと思います。では、フロントエンドはこれくらいにして次回からにバックエンドにかかりましょう。お疲れ様です。

JSひろばアプリ開発2日目：スタイルの設定

2024/01/222022/12/12 by Dan

前回の記事ではアプリの概要とデザインを全体像として決めました。今日は、もう少し具体的なフロントエンドのデザインを設計していきます。ファイル構成（どの段階でコンポーネントにするか）とPrimeVueのライブラリを見ながらサクサク進めていきたいです。ちなみにバックエンドも同時に進めても良かったのですが、割と簡単な作業になりそうなので、モックのJSONファイルで先にフロントエンドでテストをしてからでも良いと判断しました。ですので先にVueのアプリケーションから固めていきます。作業日 2022年12月10日作業にかけた時間 3時間合計作業時間 6時間作業内容 Figmaのデザインを形にしていくファイル構成を考えるVueコンポーネントの作成Piniaのインストール PrimeFlexのインストール前回入れていなかったので、今回使うCSSライブラリのPrimeVueで使うCSSユーティリティをインストールします。これでクラスを使ってマージンの設定やFlexの設定ができるようになりました。次にGoogleフォントを追加しました。CDNでfontをリンクさせました、必要に応じてフォントのファイルをダウンロードしてローカルから使うようにすることも考えています。 main.jsに下記のimport ‘@/assets/global.css’をインポートしました。スタイルはできるだけPrimeVueのものを使い、カスタムしたい場合は.Vueファイルの下に<style></style>を作成してそこにCSSを書きました。ざっくりと全体像を作成しました。ユーザーエクスペリエンスの向上のために下記のことを先に達成したいです。これを実現するにはいくつか方法がありますが、PrimeVueのコンポーネントでダイナミックダイアログというものがあったのでこれで対応していきます。さらに上記でごちゃごちゃした検索機能とか、ボタンの枠を固定してボタンを押すとこのダイアログが表示されるようにします。なのでこれらはコンポーネントにまとめてあげましょう。とりあえずポップアップが開くところまではOKですね。 Piniaのインストール次にPiniaをインストールします。単純にreactive()でオブジェクトとしてデータまとめても良いのですが、propsでごちゃごちゃしていくと後からの修正が大変なので、グロバールでアクセスできるPiniaの方がよいと判断しました。 Piniaの使い方はこちらで説明しています。ではPiniaのインストールが完了したらmain.jsに追加します。その後にstore.jsというファイル名でアプリに使うデータをPiniaを使ってここに保管させます。どのようなデータを保管するか具体的な構成は次回までに考えておきます。とりあえずこんな感じでPiniaで作成したStoreデータをメインの画面に表示させることができました。 Piniaのファイルはこのように書きました。 App.VueのファイルにはこのようにPiniaをインポートしました。では、次回にポップアップの中身と検索機能を作成していきたいと思います。お疲れ様です。

JSひろばアプリ開発1日目：プロジェクトのセットアップ

2024/01/222022/12/09 by Dan

私がプログラミングを独学で始めたのた2020年の3月、ニューヨークでコロナがちょうど発生した時でした。それから片手間にPythonを１年くらい学び、その後にJavaScriptを後に学び始めました。それからチケット管理アプリをデモで作りましたが、もっと実践で使えそうなアプリを作りたいと思い、今回のJSひろばアプリを作ることに決めました。今回はプログラミングを始めたい人の為にすべての作業をゼロから行い、コードもすべてオープンソースで公開いたします。作業の内容作業日 2022年12月8日作業にかけた時間３時間合計作業時間３時間作業内容アイディアを絞るUIをFigmaでデザインする使用するテクノロジーを決める課題点をクリアする JSひろば JSひろばという名前でアプリを進めていきます。これは、ユーザーがJSエンジンのコンソールにウェブページからインプットできて、ファンクションやWindowオブジェクトの仕組みを実際に試しながら学ぶアプリです。下記がアプリのイメージになります。これは無料デザインツールのFigmaを使って作りました。詳しいFigmaの使い方はこの記事で紹介しています。当初はユーザー登録をしてユーザーが好きなコードの投稿や、お気に入りのコードを登録する機能までつけてみようかと思いましたが、機能の実装までにかなり時間がかかりそうなのでとりあえずはなしで進めます。今回のスタック JSひろばアプリは今まで使ってきたPtyhonのウェブフレームワークのDjangoとそれをREST APIにしてくれるライブラリを使います。フロントエンドはReactを使おうかなと思ったけどVueの方が慣れているのでそちらを使います。 Djangoだとついてくるアドミンパネルからデータのエントリーができるのでこれもプラスですね。では、今回のスタックDjango＋PostgreSQL＋Vueのイメージ図です。 eval()の脅威今回、ユーザーがウェブページからeval()のメソッドを使ってコンソールと同じようにリスポンスを返すようにしたいのが一番の目的でした。しかしeval()はセキュリティ上使わない方がよいようですね。有名なハッキング手法のうちの一つにEVAL インジェクション(eval injection)があることを知りました。これは、JavaScriptのデーターフォーマットをであるJSON (JavaScript Object Notation)に不正なコードを挿入し想定外の動作を誘導する攻撃手法です。特にPHPをサーバーで使っている場合は危険のようですね。今回は下記の点からeval()を使っても良いと判断しました。 Vueのプロジェクト作成 Vueのスタックはこんな感じです。 Vue + PrimeVue（UIライブラリ）＋ Vite + Pinia 今回はさくさくに動くViteのビルドツールを使います。とりあずJavaScriptでコンソールをウェブページに実装できるところまで進めます。 UIで使うCSSライブラリはPrimeVueにします。詳しいライブラリの説明はこちらで見てください。 TailwindCSSでもよかったのですが、PrimeVueに使えそうなターミナルのコンポーネントを発見しました！まさにこれをアプリのメインのターミナルとして使いたいですね。ではPrimeVueもインストールしましょう。詳しいPrimeVueの設定の仕方はこちらを参照してください。とりあえずここまでできました。ではPrimeVueのコンポーネントを使ってキレイにしましょう。細かいインプットの制限やコードの整理はまた次回に行います。 GitHubでコードを公開しているので見てください。 GitとGitHubの使い方もYouTubeで説明しているのでよかったらどうぞ。完成したアプリはこちらからどうぞ。

ReactをUbuntuサーバーからデプロイする（Nginx)

2024/01/222022/12/06 by Dan

今日はUbuntuサーバーからReactアプリのデプロイをする方法を紹介していきます。 Vueのアプリをデプロイする方法はこちらからどうぞ！今日はnpx create-react-appの代わりにViteを使ってReactアプリをビルドしていきます。なぜReactをViteでセットアップすべきなのかを知りたい方はこちらからどうぞ！どちらを使うにしてもビルドのコマンド（Viteならnpm run build）でJavaScriptのコード、画像ファイル、スタイル、HTMLファイルをdistディレクトリにまとめられます。今回はUbuntuとウェブサーバーのNginxを使ってReactアプリをデプロイします。では早速本題にとりかかりましょう。準備しておくこと Reactのアプリを準備するではローカルの環境でサーバーにアップロードするためのReactのファイルを作成しましょう。すでにReactのアプリが準備できている場合はこの手順を飛ばしてください。 npm run devでテストサーバーからReactのアプリがブラウザで見ることができれば一旦OKです。 UbuntuサーバーにSSHで接続ではサーバーに遠隔で入るためにSSHを使いましょう。私のおすすめはフリーソフトのMobaXtermです。こちらの記事で詳しいMobaXtermの使い方を説明しているので参考にしてください。ではサーバーのIP、ポート22（通常は）、ユーザーIDとパスワードを使ってサーバーに接続しましょう。ではrootで接続していた場合はUbutuのユーザーに切り替えます。 Reactのファイルをアップロードするでは適当な場所にReactのアプリケーションを上げます。指定がない場合はUbutnuのユーザーのフォルダにアップロードしましょう。 MobaXtermのクライアントだとSSHで接続された状態で、ファイルの転送がドラッグ&ドロップで実現できます。ここに新しく「React-Tutorials」という名前を付けてReactのファイルをアップロードします。ディレクトリ名は皆さんのアプリに適したものにしましょう。ここで、GitHubにあるリポジトリからクローンすることもできるのでそちらの方が実用的かもしれません。GitとGitHubの使い方はこの動画を参考にしてください。 Nginxのコンフィグファイルを作成ではNginxをインストールする記事を読んで先に下準備を済ませておきます。ではこのNginxのコンフィグファイルに下記の様に書いていきます。私の場合はこのようになりました。ではCtl+OもしいくはCtl+Xでデータを上書きしてnanoのテキストエディタを閉じます。次にsites-availableからsite-enabledにシンボリックリンクを作成します。このsites-enabledにあるファイルをNiginxが読み取りサイトを公開するようになっていますので。ではsites-enabledの方にもファイルができていたらOKですね。ポートを開放する先ほどのNignxのファイルでポート80番を開けていた場合はデフォルトで空いていると思いますがもし、私の例の場合のようにポート83番からデプロイしたい場合はファイヤーオールの設定で許可する必要があります。今後、一つのサーバーから複数のアプリケーションをデプロイする方法も紹介しているのでよかったら試してみてください。あとNginxのサービスをリスタートすることを忘れずにデプロイしたサイトにアクセスでは実際にデプロイしたReactアプリケーションにアクセスしてみましょう。 http://172.104.81.40:83/ おめでとうございます。もしうまくいかない場合は、コメントに詳しい状況を書いてくださいね。お疲れ様でした。