• , , , , ,

    NuxtJSをUbuntu/PM2/Nginxでデプロイしよう

    今日はNuxtで試しに作ってみたフロントエンドロードマップのウェブアプリをUbuntuサーバーからデプロイします。 先にVueのデプロイの記事を読んでnginxを使ったサーバーを構築しておきましょう。 ちなみにAWS、Heroku, Digital Oceanなどのサーバーを使う場合は今日のようにプロキシサーバーを設定せずにデプロイできる方法があるそうなので見ておいてください。しかし、今日のNginxの設定はとても良い練習になるのでどのサーバーでも活用してみてください。 準備すること Nuxtビルドのチョイス Nuxtアプリをデプロイするにあたり、２つの方法があります。デフォルトはSSR：サーバーサイドレンダリングされる方法で設定されています。もう一つのnpm run generateのコマンドでstaticの静的サイトとしてビルドしたい場合はNuxtのコンフィグに下記のラインを追加しましょう。静的サイトの場合は普通のHTMLファイルのようにそのままデプロイできるのでプロキシサーバーの設定も不要です。… 記事を読む

  • , , , ,

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

    今日はNuxtJSのウェブアプリのプロジェクトに状態管理システムのPiniaをインストールする方法を紹介します。 VueでPiniaを使ったことがある人、Nuxtのコンフィグファイルを触ったことがある人はなんとなくイメージがつかめると思います。 Piniaのインストール Nuxtのプロジェクトが設定できたところで、Piniaの公式サイトの説明に従いインストールを進めていきましょう。 コマンドラインから下記の通りPiniaをインストールします。 npmを使っている人はERESOLVE unable to resolve dependency… 記事を読む

  • , ,

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

    PrimeVueはVue.jsのUIライブラリでコンポーネントの数が多くお勧めです。今日は、SSR（サーバーサイドレンダリング）ができるVueベースのNuxtライブラリにPrimeVueを使う方法を紹介していきます。 Nuxtのプロジェクト まずは下記のコマンドでNuxt3のプロジェクトを作りましょう。 PrimeVueのインストール 次にPrimeVueをインストールします。 コンフィグファイルからインポート では、ライブラリをインストールしたところで、nuxt.config.tsファイルを開きます。 デフォルトでは何も記載されていません。 ではここにPrimeVueで使うファイルをインポートしていきます。インポートするファイルはPrimeVueの公式ページにあるので必要に応じて確認してください。 Nuxtのプラグインについて… 記事を読む

  • , , , ,

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

    前回の記事では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ファイルを作成してみます。… 記事を読む

  • , , , ,

    Nuxt.jsを始めよう

    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… 記事を読む

  • Fedoraラップトップをコーディング用に設定しよう

    前回の記事ではWindowsのPCからFedoraのPCに接続する方法を説明しました。 これからFedoraのノートパソコンでプログラミングをするにあたりおすすめの初期設定をコマンドと一緒に説明していきます。 アップデート ソフトウェアパッケージを最新に更新します。 日本語入力 コーディングに英語の入力は必須ですが、日本語の入力も使うので設定しておきます。Setting→Keyboard→Japanese（Anthy）を選択して、細かい設定でひらがな、ローマ字入力を選択しましょう。 Google Chrome グーグルクロームは必須ですね。インストールしておきましょう。 VSCode… 記事を読む

  • ,

    Fedoraにリモートデスクトップをインストールして遠隔操作しよう

    私は個人用のPCと作業用のノートパソコンを分けています。個人のPCから作業用のノートパソコンに遠隔で接続して操作したいときがありますよね。その場合に下記の方法があります。 RDP(リモートデスクトップ）の場合はWindowsのホストPCからローカルのIPを使って簡単に遠隔操作が可能になります。またTeamViewerとは違い初期設定でローカルからのアクセスしか許可されていないので安全です。 違うネットワークからアクセスしたい場合には他の方法を考えるかポートフォワーディングをしないといけないですが、これでラップトップを遠隔で操作できるようになります。今日はFedoraで使えるコマンドを使いながら説明していきます。 FedoraにXRDPをインストール XRDPはオープンソースでRDP（リモートデスクトップ）をLinux等にインストールできるソフトウェアです。 今回はLinuxのデスクトップを前提にしているのでサーバーにインストールする場合は先にデスクトップシステムをインストールしてUIを確保してください。 まずはOSのアップデートをしましょう。 次にXRDPをインストールします。 次に、XRDPをスタートさせます。 ファイヤーウォールの設定… 記事を読む

  • , , ,

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

    JSひろばアプリもほぼ完成に近づいていきました。今日は最終的にvue-routerを入れて、URLで指定したコードのIDをコンソールに貼り付けできるようにします。これで、これからJSのチュートリアルを作成する際にリンクを貼り付けて、そこからサンプリコードを実行できるようにすることが目的です。 今後はユーザーがコードを登録できたり、シェアできるようにできたら楽しいなと思います。オープンソースなので皆さんでカスタマイズして試してください。 作業日 2022年12月28日 作業にかけた時間 6時間 合計作業時間 30時間 作業内容 モジュールインポートエラーの対応favアイコンの作成英語版に対応させるDBモデルの改修Google… 記事を読む