プログラミング入門ナビ

プログラミング学習初心者のための情報メディア by Proglus（プログラス）

Nuxt.jsでcreate-nuxt-appを使った新規プロジェクトの作成方法

By

本記事は、Udemy「Nuxt.js入門決定版！」 、Proglus（プログラス）「Nuxt.js」サポート記事です。

プロジェクトファイルを配置する場所

記事では、
macOS, Windows共通: ユーザーのホームディレクトリ直下の、”nuxt-projects” という名前のディレクトリ（フォルダ）を作成して作業します。

プロジェクト作成方法

create-nuxt-appというnuxt.jsプロジェクトの雛形を作るアプリケーションを使います。

記事では、プロジェクト名は”hello”とします。
学習内容により、適宜プロジェクト名を変更してください。

ターミナルを使い、nuxt-projects内へ移動します。

操作例)
$ cd nuxt-projects

これで、nuxt-projects配下に、helloプロジェクトのディレクトリが作成されます。
エンターキー押下して次へ進める。

プロジェクト作成

$ npx create-nuxt-app hello

エンターキー押下して次へ進める。

補足：プロジェクト名である、”hello”の部分は、学習内容により適宜変更してください。

対話形式で、プロジェクトを設定する

create-nuxt-app v3.7.1 の質問項目と、設定内容は、下記となります。
尚、バージョンアップにより、質問項目が変更となる場合があります。

Generating Nuxt.js project in hello
? Project name: (hello)

プロジェクトネームを設定できます。カッコの中のhelloがデフォルトの値です。
デフォルトの値を使いたいので、そのままエンターキーを押下。

? Programming language: (Use arrow keys)
❯ JavaScript
TypeScript

プログラミング言語を選択します。
このコースではJavaScriptを利用します。
JavaScriptにカーソルがあたっている状態で、エンターキー押下

? Package manager:
Yarn
❯ Npm

パッケージマネージャーを選択します。
ざっくりいうと、ソフトウェア管理ツールです。
このコースでは、Npmを利用します。
エンターキー押下

? UI framework: (Use arrow keys)
❯ None
Ant Design Vue
BalmUI
Bootstrap Vue
Buefy
Chakra UI
Element
Framevuerk
Oruga
Tachyons
Tailwind CSS
Windi CSS
Vant
View UI
Vuetify.js

UIフレームワークを選択します。
知名度が高いものでいうと、たとえば、boostrapがあります。
ここでは選択しないので、Noneを選択した状態で、
エンターキー押下

? Nuxt.js modules:(Press ＜space＞ to select,＜a＞o toggle all,＜i＞ to invert selection)
❯◯ Axios – Promise based HTTP client
◯ Progressive Web App (PWA)
◯ Content – Git-based headless CMS

Nuxt.jsのモジュールを追加する場合は、選択するのですが、
ここでは、なにも選択しないで、エンターキー押下

? Linting tools:(Press ＜space＞ to select,＜a＞o toggle all,＜i＞ to invert selection)
❯◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint
◯ Commitlint

Linting toolsを選択できます。
ざっくりいうと、コードレビューツールですが、ここでは使わないので、そのままエンターキー押下

? Testing framework: (Use arrow keys)
❯ None
Jest
AVA
WebdriverIO
Nightwatch

テストフレームワークの選択です。
ここでは使わないので、Noneを選択して、エンターキー押下

? Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG)
Single Page App

レンダリングモードを選択します。
ざっくりいうと、
Universalは、サーバー側で、jsを実行してレンダリングするモード。
Single Page Appは、クライアント側でjsを実行してレンダリングするモード。

ここでは、Universalを選択します。
補足：セクション「Nuxt.js & FirebaseによるSPA開発入門」の場合は、
Choose rendering modeの選択で、Single Page Appを選択してください。

エンターキー押下

? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting)
Static (Static/Jamstack hosting)

Serverの方は、node.jsとして サーバーで動かす場合に選択、
Staticは、静的なファイルとして、静的ファイルを書き出して動作するので静的ホスティングサービス上にデプロイする場合に選択。

ここでは、Serverを選択します。
エンターキー押下

? Development tools: (Press ＜space＞ to select,＜a＞o toggle all,＜i＞ to invert selection)
❯● jsconfig.json (Recommended for VS Code if you’re not using typescript)
◯ Semantic Pull Requests
◯ Dependabot (For auto-updating dependencies, GitHub only)

開発ツールの設定に関する項目です。
VS Codeを使うので、jsconfig.jsonにチェックを入れます。スペースキーを押して、黒丸になれば、選択状態です。
エンターキー

? What is your GitHub username? (naka)

GitHubのユーザー名を入れます。特に理由がなければ、デフォルトの設定でOKなので、エンターキーをおしてください。

Version control system:
❯ Git
None

ソースコードのバージョンコントロールで、Gitを使うかの選択です。
コース内では、Gitは使いませんが、後で使いたくなることを考慮して、Gitを選択してエンターキー押下。
処理が行われます。数分掛かります。

“Successfully”と表示されればOKです。

動作確認

ターミナルで、下記を実行。
helloディレクトリに移動

$ cd hello

開発モードでサーバーを起動
$ npm run dev

画面に表示されているURL(例：http://localhost:3000/)をコピー、

Google ChromeでURLを開いてください。

このような、画面が表示されていればOKです。

補足：学習タイミングによってはUIが異なることが想定されます。

次のレクチャーへ進んでください。

検証環境

  • npm v14.18.1
  • create-nuxt-app v3.7.1
  • nuxt.js 2.15.8

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

【10/04更新】Udemyプログラミング入門講座等の割引クーポン配布

By

地域によっては、外出自粛要請がでています。

不要不急な外出は控えて、自宅でオンライン動画をつかって学習しませんか？
世界最大級の学習プラットフォームUdemy(ユーデミー)で使える、期間限定の割引クーポンを配布します。

期間

2021/10/04（月）より1ヶ月

割引クーポン

下記リンクを経由すると、Udemyコースが割引価格で受講できます。

このコースが気に入ったら、ぜひレビュー投稿をお願いいたします。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

GCPで本当に各サービスがすべて停止、シャットダウンしてて課金対象外となってるか確認する方法

By

GCP(Google Cloud Platform)の学習が終わりリソースをクリーンアップした後に、本当に各サービスがすべて停止、シャットダウンしてて課金対象外となってる確認する方法について解説します。

このコースは、Udemyコース「最速で学ぶ – Google Cloud Platform（GCP）入門完全攻略コース」と、Proglus（プログラス）で公開しているオンラインコース「Google Cloud Platform（GCP）入門」のサポート記事です。

解決方法

結論としては「GCPのお支払いページで日毎の利用料がゼロになったのを確認する」ことが確実です。

日毎の利用料の確認方法

お支払い > レポート から確認ができます。

GCP　お支払い ><noscript><img src=

尚、補足として、「プロジェクトの削除」「Cloud 請求先アカウントを閉鎖する」を実行すれば、より安心できます.

プロジェクトの削除

Cloud請求先アカウントの閉鎖

おわりに

GCP(Google Cloud Platform)の学習が終わりリソースをクリーンアップした後に、本当に各サービスがすべて停止、シャットダウンしてて課金対象外となってる確認する方法について解説しました。

クラウドの利用に慣れていない場合、料金面が不安になる方も多いと思います
利用料レポートを日々確認して異常のないことを確認しましょう。

また、学習が終わり、当面GCPを使わない場合には、忘れないうちに「プロジェクトの削除」「Cloud 請求先アカウントを閉鎖する」を実行するとよいでしょう。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

AWS Cloud9のMySQLサーバにローカルPCから接続する方法について解説します！

By

この記事では、AWS Cloud9のEC2インスタンスに立てたMySQLサーバーに、ローカル環境のMySQLクライアント(MySQL Workbench) から接続する方法についてご説明します。

この記事は、Udemyオンライン講座「はじめてのRuby on Rails入門-RubyとRailsを基礎から学びWebアプリケーションをネットに公開しよう」とProglus「Ruby on Rails5入門」のサポート記事です。

なお、アクセス時期によっては実際のサイトと記事中の画像で表示が異なる場合があります。

AWS Cloud9とは

・クラウドコンピューティングサービスのAWSで利用できるサービスの一つです。
・クラウド上のサーバー資源を利用して、ブラウザ上の統合開発環境(IDE)でWebアプリケーションを開発することができます。
・Cloud9を起動すると、AWSのEC2インスタンスに接続され、開発を進めることができます。

AWS Cloud9上のMySQLサーバーに接続する

Webサービスの開発を進める上で、MySQLサーバーに接続してSQLコマンドを実行し、DB操作を行う場面は多々あります。

そしてクラウド上で動くリモートのMySQLサーバーに接続するためには、SSH接続などで認証する必要があります。

Cloud9で開発を行う場合、EC2インスタンスが自動的にブラウザ上のIDEと接続されます。そのため認証情報がユーザーに見えない形となっているので、Cloud9のEC2環境で起動しているMySQLサーバーに接続するためには少し工夫が必要です。

ここでは、Cloud9のMySQLサーバーにローカル環境から接続するまでの流れについて解説します。

解説で用いる主なバージョンについては以下の通りです。

ローカル環境:
PC: MacBook Pro 13-inch(2020, intelプロセッサ)
MySQL Workbench: 8.0.25

Cloud9環境:
インスタンスタイプ: t2.micro (1 GiB RAM + 1 vCPU)
プラットフォーム: Ubuntu Server 18.04 LTS
MySQL: 8.0.25

キーペアの作成

SSH接続でリモートサーバーとの認証に用いるため、まずは公開鍵・秘密鍵のキーペアを作成します。

まずawsのEC2コンソールを開き、「キーペア」を選択します。

「キーペアを作成」を押し、新規作成を行います。

キーペア名を入力し、ファイル形式としてpemを選択します。「キーペアを作成」を押します。

するとcer形式のファイルとして秘密鍵がダウンロードできるので、分かりやすい場所に保存しておきます。

この秘密鍵は再発行ができないので、もしファイルを削除してしまった場合は、もう一度新しいキーペアの作成を行なってください。

公開鍵の登録

先ほどダウンロードした秘密鍵から、公開鍵を生成します。

公開鍵の生成にはssh-keygenコマンドを使用します。

$ ssh-keygen -y -f {秘密鍵ファイルまでのパス}
ssh-rsa .....

出力のssh-rsaで始まる文字列が公開鍵となります。

以下のようなエラーが発生する場合は、秘密鍵のファイルの権限を変更する必要があります。

$ ssh-keygen -y -f demo.cer
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@ WARNING: UNPROTECTED PRIVATE KEY FILE! @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0644 for '/Users/ricky/Downloads/demo.cer' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "/Users/ricky/Downloads/demo.cer": bad permissions

chmodコマンドを管理者権限で実行し、0600を指定します。

sudo chmod 0600 {秘密鍵ファイルまでのパス}

公開鍵が出力できたら、Cloud9の開発環境を起動してください。

ターミナルで以下のように入力し~/.ssh/authorized_keysファイルを開きます。

$ vim ~/.ssh/authorized_keys

出力された公開鍵を、以下のようにファイル下部に新しく貼り付けます。

ここで既に存在する鍵は絶対に削除しないでください。Cloud9のコンソールからブラウザ開発環境に接続できなくなります。

セキュリティグループの変更

次に、ローカルPCからCloud9のEC2インスタンスにSSHできるように、セキュリティグループの設定を変更します。

Cloud9のコンソールで環境名をクリックし、詳細画面に飛びます。

 

「Go To Instance」をクリックすると、Cloud9の環境があるEC2インスタンスの詳細画面に飛びます。

「セキュリティ」から「セキュリティグループ」のリンクをクリックし、セキュリティグループの詳細に飛びます。

「インバウンドルールの編集」をクリックします。

ローカルのPCからの接続を許可するため、ソースに「0.0.0.0」と「::/0」を追加しましょう。完了したら、「ルールを保存」をクリックします。

これでネットワーク周りの設定は完了です。ローカルPCからSSHができることを確認しましょう。

もう一度EC2インスタンスの詳細を開き、インスタンスのグローバルIPを確認します。

そして以下のコマンドで接続します。

$ ssh -i {秘密鍵ファイルまでのパス} ubuntu@{EC2インスタンスのグローバルIP}

上手くいけば、EC2環境にSSHで入ることができるはずです。

Workbenchから接続

次はWorkbenchで接続情報を入力し、Cloud9のEC2環境で起動しているMySQLサーバーに接続してみましょう。

MySQLは既にセットアップ済みで、起動状態であるとします。

Workbenchを起動します。

「MySQL Connections」の右の「+」アイコンをクリックします。

すると接続の設定画面が表示されます。

まず、Connection Nameで適当なコネクション名を設定します。そしてConnection Methodの部分で「Standard TCP/IP over SSH」を選択します。

次はSSH認証に関する設定を行います。SSH HostnameにはEC2インスタンスのパブリックIPを入力し、SSH UsernameにはEC2インスタンスのユーザー名を入力してください。

SSH Key Fileでは、先ほどssh-keygenで作成した秘密鍵のファイルまでのパスを指定します。

デフォルトの場合は図の通りですが、MySQLの設定に変更がある場合は、ホスト名やポート番号、ユーザー名も適宜変更を行ってください。

これで準備が整いました、Test Connectionを押してCloud9上のMySQLサーバーとの接続確認を行います。

以下のように表示されたら成功です。

「OK」ボタンを押せば、WorkbenchからMySQLサーバーに接続することができます。

これで、Cloud9のMySQLサーバーにローカル環境から接続することが出来ました！

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

Nuxt.jsのバージョンをコース指定のバージョンに変更する方法

By

概要

create-nuxt-appを利用すると、その時点での最新のNuxt.jsでプロジェクトが作成されます。

最新バージョンでは、コースの通り進めることができなくて、本質的ではないところで躓いてしまいますので、コースで使用しているバージョンにダウングレードします。

本コースは、この記事は、Udemyにて公開中のオンライン講座「Nuxt JS入門決定版！Vue.jsのフレームワークNuxt JSの基本からFirebaseと連携したSPAの開発まで」及びのProglus（プログラス）で公開中のオンライン講座「Nuxt.JS入門」サポート記事です。

流れはこのようになっています。

  1. インストール済みの依存パッケージを削除
  2. package-lock.jsonを削除
  3. package.jsonを修正
  4. nuxt.config.jsを修正
  5. 依存パッケージを再インストール
  6. pages/index.vue を編集
  7. 動作確認（Hello World!）

この記事では、3.15系から2.8系へダウングレードする方法について紹介します。

1. インストール済みの依存パッケージを削除

node_modules フォルダを削除します。

2. package-lock.jsonを削除

3. package.jsonの修正

①scriptsを下記のよう書き換えます。

v2.8当時の書き方に修正する。

修正前

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

↓
修正後

 "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "export": "nuxt export",
    "serve": "nuxt serve"
  },

② nuxtのバージョンを2.9未満の最新版(2.8系の最新版)に設定

 "nuxt": "<2.9"

4. nuxt.config.jsを修正

@babel/preset-envのエラーが出ないように検証した結果を反映している。

編集前

build: {
}

↓

編集後

 build: {
    babel: {
      presets({isServer}) {
        const targets = isServer ? { node: 'current' } : { ie: 11 }
        return [
          [ require.resolve("@babel/preset-env"), { targets }  ]
        ]
      },
      plugins: [
        "@babel/syntax-dynamic-import",
        "@babel/transform-runtime",
        "@babel/transform-async-to-generator"
      ]
    }
  }

5. pages/index.vue を編集

v2.8当時の書き方に修正する。

編集前

<template>
  <Tutorial/>
</template>

<script>
export default {}
</script>

↓

編集後

<template>
  <section class="container">
      <p>Hello World</p>
  </section>
</template>

 
<script>
export default {}
</script>

6. 依存パッケージを再インストール

$ cd hello
$ npm install

7. 動作確認（Hello World!）

開発用のウェブサーバを起動

$ npm run dev

※ 終了する場合はcontrol + c

8. 動作確認（Hello World!）

Nuxt.jsバージョン確認＆Google Chromeで指定のURLを開く

ページにHello World!と表示されれば動作確認OK。

よくあるご質問

Q. 記事の通り実行してもバージョンが変更されません。
Ans. 各種編集後のファイルが保存されていないケースが多いです。再度ご確認ください。

補足

ダウングレードするとプロジェクト直下にpluginsフォルダや、assetsフォルダ等ができない場合があるようですが、手動で作成すれば動作します。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する