すべてのカテゴリ

Firebase で React アプリをホスティングするFirebase のホスティングを利用して、作成した Web ページをインターネットに公開する方法は既に紹介しています。この記事では、React で作成したアプリを Firebase のホスティング機能を利用してインターネットに公開する具体的な方法を紹介しています。npm を利用して、React で開発する場合、「create-react-app」のスクリプトを利用して React のプロジェクトを作成すると、自動的に React のサンプルアプリを作成してくれます。このサンプルアプリには、公開用のイメージを作成するスクリプトが既に用意されているので、このスクリプトを利用して公開用のイメージを作成するだけで、あとは基本的な Firebase の管理コマンドを実行すれば、インターネットに簡単に公開できます。React アプリのサンプルプロジェクトを作成最初に React アプリのサンプルプロジェクト（テンプレート）を作成します。プロジェクトの作成には、「create-react-app」をインストールする必要があります。インストールしていない場合は、最初にインストールを行います。React を利用していろいろなアプリを開発する場合、頻繁に利用するので、システムレベルのインストールをすることをお勧めします。$ sudo npm install -g create-react-app　(*) Windows の場合は「sudo」は不要です。「npm install -g create-react-app」でインストールします。

Django で作成したサイトの公開方法一通り Djang のフレームワークを利用して、Web アプリ・Web サービスを開発する基本的な手順を紹介してきましたので、実際に Django で作成したサイトをインターネットで公開する方法を紹介してみようかと思います。Django で作成したサイトを公開する場合、いろいろな方法があります。自分でサーバーを準備して OS のインストールから、Web サーバー周りの設定をやるとなると、ちょっと複雑です。そこで、今回は簡単にインターネットに公開する方法として、Django をはじめとする、Python を利用した Web ホスティングのサービスを提供しているプロバイダーの一つの「Pythonanywhere」のサービスを利用して、Django のテンプレートのプロジェクトの公開を一通りやってみる事にしました。PythonanywarePythonanywareは名前からもお分かりかと思いますが、Python に特化したサービスを提供しているプロバイダです。サイトは英語のサイトになっています。制限などはありますが、まずは無料で Django の Web アプリを公開することができます。「Beginner（ビギナー）」プランは無料から利用できます。ドメインの変更はできないので、「[username].pythonanywhere.com」にこと英なのとの、アプリは一つだけで利用できる CPU やネットワークのアクセスなどに制限があります。まずは、サービスを作成して公開するという目的ならば十分です。有料プランも５ドルからあるので、利用の目的に応

FirebaseでReact Routerを使うには？FirebaseとReactという組み合わせは、Webアプリ、Webサービスを作る場合よく利用される組み合わせです。 Reactと合わせて利用される機能にReact Router (react-router-dom)があります。これは、React内でページを切り替えるための機能の拡張ですが、実際のWebサイトのページを切り替える感覚で利用できるので便利な機能です。 例えば sv-sw.com/firebase のようにドメインに続いて「firebase」のようにパス（Path）を指定すると、そのページがあるかの様に表示を切り替えてくれる機能です。 Reactのアプリのページは基本的に「１ページ」 よく、１ページアプリとも言われますが、実際にReactが使っているページは、通常は「index.html」だけです。Reactのプログラム内で、「firebase」というページ（のようなもの）を作った場合でも、実際のページは存在しません。 実は、この辺りが、実際にWebサーバーにReactアプリを公開しようとする場合（デプロイする場合）にちょっと混乱する部分です。 Webホスト（サーバー）が管理している「ルーティング」 元々は、Webサイトの全てのHTMLファイルはWebホスティングしているWebサーバーにおいてあって、ブラウザから要求されたファイルをWebホストが提供していました。最近のWebサイトは実際のファイルがない場合も多く、仮想ファイルをサーバーが判断してWebブラウザに提供しています。 サーバー側でのレンダ

FirebaseでVueアプリをデプロイ（公開）する方法FirebaseでVueアプリをデプロイ（公開）する方法 よく利用されているフレームワークのVue(Vue.js)でアプリを開発して、そのアプリをインターネットで公開する方法です！ この記事ではFirebaseのホスティング機能を利用して、Vueで開発したアプリをインターネットで公開する方法を解説しています。 公開するフォルダーを決める！ 何を今更と思われる方もいらっしゃると思いますが、どのフォルダーの中身をインターネットで公開するかを最初に決めます。 候補としては、 ＊Vueのプロジェクトフォルダを使う ＊Firebaseのホスティングで公開する為のフォルダを用意する シンプルなのは、Vueのプロジェクトフォルダーをそのまま公開用にも共用してしまうという方法が一番手間がかかりません。 Firebaseのホスティングで公開する専用のフォルダを用意する場合、開発用のソースコードのフォルダーと公開用のフォルダーを完全に分けて管理できるというメリットがあります。 わたしも、最初は、Vueのプロジェクトフォルダをそのまま利用していました。しかし、デザインを別のプロジェクトで再利用する場合に、Firebaseのプロジェクトも別のプロジェクトになる場合が多くなります。そういう事情もあって、最近は公開は別のフォルダを利用するようにしています。 Vueのプロジェクトフォルダーを使う場合 Vueのプロジェクトフォルダに移動して、Firebaseのホスティングの為の準備を行います。 $ npm install -g fireba