HostingとVue.jsを触ってみる。HostingとVue.jsを触ってみる。IT記事FirebaseでVue.jsを試してみる。どっちも便利なCLIツールがあって簡単で早い。最近のフレームワークやプラットフォームは、こういう目的に応じたプロジェクを生成してくれたり、簡単にアクセスできる便利なCLIツールがついていることが多くて良い。いうか以下からは公式ドキュメントに書いてあるのでそっち見たほうがよい。toolをnpmでインストールしてみる。loginとすると、Firebase(というかGoogle)にログインできる。これで認証終わりなのすごい、さすがGoogle。loginFirebaseは置いておいて、次はVueプロジェクトフォルダを作る。cliでプロジェクトを作ってみる。@vue/cli-service-globalVueプロジェクトを作る。routerやvuexなど、プロジェクトに含めるプリセットを選べる。あとから追加することもできる。シンプルにデフォルトを選択した。uiというコマンドを使うとGUIでプロジェクトを作ったり、プリセットの管理ができるようだ。すごいプロジェクトが作られたので、プロジェクトに移動して開発サーバーを立ち上げる。serve立ち上げたらとりあえずApp.vueにVueのコードを書いてみて画面で確認する。}};</script>画面に反映された。Hostingで公開できるようにする。init・プロジェクトに含めるFirebaseの機能を選べる。Database,Firestore,Functions,Hosting,Storage,Emulatorsというのがあるようだ。Hostingを選ぶ。・次にFirebaseにある既存のアプリケーションにするか、新しく作るかみたいなのを聞いてくる。新しいアプリケーションを作るを選ぶ。・他のユーザーとかぶらない名前を英語小文字でつける。アドレスになるからね。うまくいったらプロジェクトが作られる。うまくいかなかったらウェブサイトにいって作ってから戻ってきて、既存のアプリケーション使うを選ぶ。・公開するディレクトリ名を設定する。publicはVueがコンテンツ置き場に使っているので、publicじゃなくてdistにする。・indexアドレス以外へのアクセスを全部indexにつなげるか聞かれる。シングルページアプリケーションを作るつもりなので、yと答える。.firebaseという設定ファイルが作られる。こいつを直接編集してもよい。initするとまた書き換えられる。dist/index.htmlにサンプルコードが書かれている。消す前にいちべつする。firebase.jsといったjsファイルを持ってきて書くだけで、いろいろfirebaseの機能が使えるんだね。プロジェクトに話を戻すが、プロジェクトをビルドする。builddistフォルダにビルドされる。さあ最後にFirebaseで公開するコマンドを打つだけだ。ローカルでも確認しよう。serveVueのときと同じ画面が確認できたらデプロイする。deployデプロイが完了したら、アドレスに接続する。https://アプリケーション名.firebaseapp.com作ったものが公開された。まとめHostingは容量やアクセス量で料金が発生するようだ、個人のこれくらいのごく少量なら無料みたい。公開したアドレスが自動生成感なく結構読みやすい。最初からhttpsになっている。コマンドいくつかで、すぐにフォルダの公開までできた。Amplify触ってみる。速攻でApi形式のWebアプリ作れる。...Vue.jsでファイル選択フォームと画像プレビュー機能を作るVue.jsを使ってファイル選択Formと画像のプレビュー機能を作った。HostingとVue.jsを触ってみる。FirebaseでVue.jsを試してみる。...最近のコメントオーバーウォッチ・アンチピックがひと目でわかるサイトを作った。琴葉茜プロフィールopvelwebサイトを作ったりしています。opvel.hero@gmail.com仕事も募集中。