はじめに ポートフォリオや勉強の一環として作成したWebサービスを無料で公開したいというケースはよくあるかと思います。 少し前までならHerokuがありましたが、生憎無料で使えなくなってしまいました。そこで今回はHerokuと似た無料ホスティングサービスのRailwayとNetlifyに、それぞれバックエンドとフロントエンドをホスティングする方法をまとめてみました。 ここでは主にRailwayやNetlifyの設定方法を説明します。※アプリケーションについては解説しませんのあしからず 構成 RailwayバックエンドRubyOnRailsMySQLNetlifyフロントエンドVue.js リポジトリは一つにまとめておりディレクトリ構成は下記の様な感じとなっております。 $... 御覧になる | 御シェアする
タグ: Vue.js
VimのaleプラグインでVueへのESLintを非同期で実行する
VueでRailsのAPIを叩く
Vue.jsとRailsをDocker上に構築
Vue.jsは良いぞ Vue.jsはSPAを作るのに非常に良いフレームワークです。学習コストが低くパフォーマンスは高く、そして自由があります。サードパーティの開発も盛んでVuetifyというUIを提供しているフレームワークも併せてお勧めです。 今回はバックエンドにRailsを使いAPIサーバを立てて、フロントエンドにはVue.jsを使ってAPIを叩いてシェルスクリプトを実行出来る環境をDocker上に構築してみたいと思います。フロントエンドのUIにはVuetifyを使用します。 環境構築にはこちらの記事を参考にさせて頂きました。https://qiita.com/Kyou13/items/be9cdc10c54d39cded15 Vue.jsとRailsのコンテナを作成 Dockerfile作成 適当なディレクトリを作成して下さい。その中身を下記のような構成にすることが目標です。 $... 御覧になる | 御シェアする
ExpressとVue.jsでSPAを作る~麻雀点数計算アプリ~
はじめに 今回は流行りのSPAを作ってみたいと思います。このページを読んでいるという事は恐らくSPAの概要はご存知かと思いますが、自分のためにも一応まとめていきます。詳しい方は読み飛ばしてください。 SPAとはSinglePageApplicationの略で、一ページ内で色々なことが可能なWebサービスのことです。SPAの良さはエンドユーザーのリクエスト回数を減らせる事です。最初の一回だけリクエストさせておいて、その後ユーザーはゲットしたコンテンツを切り換えるだけで済むので快適にWeb操作を行うことが出来ます。 今回は麻雀点数を行うページ、操作説明のページ、麻雀ルール解説のページをSPAでルーティングするサイトを作ってみたいと思います。 ※ネイティブアプリも作成してみました。無料ですのでインストールしてみて下さい。リンク 環境準備 Node.jsインストール #... 御覧になる | 御シェアする