【Node.js】Progateのダウンロードサンプルをローカル環境で作動させるまで

ProgateからダウンロードできるのNode.js学習レッスンⅢのサンプルをローカル環境で動作させるまで、いろいろ引っかかってしまったので、試した手順を残しておきます。

環境

Windows10 Home

インストール

以下のものをインストールしました。

・Node.js(前回インストール済み)

・MySQL(progateのぺージを参考にインストール)

フォルダ構成を整える

progateからnodejs_study_3.zipというファイルをダウンロードしてきましたが、この中身は

・フォルダ構成が再現されていない

・画像ファイルが0byte

となっています。画像ファイルは空のファイルのままでもいいですが、

フォルダ構成は再現する必要があります。

以下のように配置します。

root/
　├ public/
　│　　　├ css/
　│　　　│　└ style.css
　│　　　└ images/
　│　　　 　└ top.png
　├ views/
　│　├ edit.ejs
　│　├ hello.ejs
　│　├ index.ejs
　│　├ new.ejs
　│　└ top.ejs
　├ app.js
　├ index.js
　└ items.sql

npmの準備

npm関連のコマンドを実行して準備します。

パスは上記のルートフォルダで行います。

npm init
npm install express --save
npm install ejs
npm install mysql

データベースを準備する

まずはサービスが動いているか確認します。

検索などからサービスを起動し、MySQL57のサービスが実行中になっているか確認します。

データベースを作成していきます。

ダウンロードファイルにitems.sqlというファイルが入っているので、こちらを使っていきます。

mysql -u root -p
CREATE DATABASE list_app;
use list_app;
CREATE TABLE items (id INT AUTO_INCREMENT, name TEXT, PRIMARY KEY (id)) DEFAULT CHARSET=utf8;
source items.sql;

最後のsource items.sql;ですが、そのままの文字コードではエラーがでたため、items.sqlをサクラエディタで開いてSJISで保存することで読み込めました。

サーバー起動

サーバー起動の前にデータベースに関する記述を修正していきます。

ついでにデータベースの動作確認用にエラーログを追加しています。

const express = require('express');
const mysql = require('mysql');
const app = express();

app.use(express.static('public'));
app.use(express.urlencoded({extended: false}));

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '*********', //mysqlに入力したパスワード
  database: 'list_app'
});

//エラーログ追加
connection.connect((err) => {
  if (err) {
    console.log('error connecting: ' + err.stack);
    return;
  }
  console.log('success');
});

app.jsを修正来たらサーバーを起動していきます

node app.js

ブラウザでhttp://localhost:3000/にアクセスして確認して問題なければ完了です。

躓いたところ

ERROR 2003 (HY000): Can’t connect to MySQL server on ‘localhost’ (10061)

mysql -u root -p;　実行時に表示されたエラー。

MySQL57のサービスが実行されていませんでした。

ERROR 1406 (22001): Data too long for column ‘name’ at row 1

source items.sql;　実行時に表示されたエラー。

items.sqlがUTF-8だとエラー表示されたので、SJISにしたら実行できました。

確認には以下のコマンドで、コマンド単体だと動作することを確認して、削除して、確認しました。

INSERT INTO items(id,name) VALUES (1,'じゃがいも');
DELETE FROM items WHERE id = 1;

追加できたかどうかの確認は以下のコマンドです。

SELECT * FROM items;

error connecting: Error: ER_ACCESS_DENIED_ERROR: Access denied for user

node app.js起動時に出るエラー

データベースに接続できていない時に、エラーを表示させるためにapp.jsにエラーログを追加しました。

パスワードとユーザーが間違っているときに出ていたので、設定を変更しました。

Cannot read properties of undefined (reading ‘forEach’)

index（一覧）ページに移動しようとすると表示されていました。

これもデータベースに接続できていない時に、エラーを表示されていました。

forEachと書かれていますが、問題はitemsが認識できていないことでした。

環境