Laravelのインストール

お仕事でLaravelを使った案件がはじまりそうなのでLaravelとPHPを少し勉強してるのですが、 マイグレーション時に Syntax errorになってあわあわしちゃったのでメモです。

1. composerのinstall

まずはcomposerのinstallです。

https://getcomposer.org/download/

以下のページからダウンロードします。

composer --version

で「composer」コマンドが使えるか試してみます。

もしコマンドがないって言われたら、再起動したり、環境変数を確認してみてください。

2. laravelのインストール

composer create-project laravel/laravel --prefer-dist project-name 5.5

project-name部分は任意です。

インストールできたら、php artisan serveでサーバーを起動します。

ブラウザでhttp://127.0.0.1:8000にアクセスすると以下の画面が表示されるとインストール成功です。

artisanとは？
ArtisanとはLaravelを構成しているコマンドラインインターフェイスの名前。 artisanは便利な多くのコマンドを提供していて、php artisan listで一覧を表示してくれます。

2.データベースの作成と設定

phpmyadminでMySQLに任意の名前のデータベースの作成をします。

/.envファイルの編集

DB_DATABASEはさっき作成した任意のデータベース名、DB_USERNAME、DB_PASSWORDはMySQLのユーザ名・パスワードにします。

※XAMPPだとDB_USERNAMEはroot、DB_PASSWORDは空で大丈夫なはずです。

11行目付近
----
DB_DATABASE=DATABASE-NAME
DB_USERNAME=root
DB_PASSWORD=
----

php artisan migrate

コマンドでマイグレーションを実行します。

すると

In Connection.php line 664:

  SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 byt
  es (SQL: alter table `users` add unique `users_email_unique`(`email`))


In Connection.php line 458:

  SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 byt
  es

というエラーがでてしまいます。。。

原因は

• Laravel5.4から標準charasetがutf8mb4に変わった
• MySQLではユニーク制約を付けたカラムには767bytesまでしか入らない

からみたいです。

なのでカラムの最大値を変更し、767bytes以上の文字列が入らないようにします。

app\Providers\AppServiceProvider.php

use Illuminate\Support\Facades\Schema;

public function boot()
    {
        Schema::defaultStringLength(191);
    }

この記述を追加します。

記述を追加したら、以下のコマンドで一旦全てのテーブルを削除してマイグレーションし直します。
php artisan migrate:rollback

php artisan migrate:fresh

これでエラーにならなければ大丈夫です。

サーバーに SSLの設定をしてみる。

サーバーにSSLの設定をしたのでメモです。

脆弱性のこととかセキュリティー関連のことはまだちゃんとまとめられてないので また書きたいなあ、なんて思ってます。。。

SSLって？

SSL(Secure Socket Layer)とは、インターネット上で情報を暗号化し、送受信できるプロトコル（一般にhttps://と表記されるもの）。 顧客情報やクレジットカード情報、その他、管理情報などを扱う際はこのSSLを利用してセキュアに通信する必要があります。

1. mod_sslをインストール

ApacheからOpenSSLを利用するためには、ApacheとOpenSSLと連携させるモジュールが必要なので、mod_sslをインストールします。

まずは入っているか確認。

yum list installed | grep mod_ssl

入ってなかったら

yum -y install mod_ssl

でインストールします。

2. 秘密鍵の作成

秘密鍵の作成をします。

SSLのCSRの発行は最初に秘密鍵を作ってその文字列からCSRを発行します。

openssl genrsa -out user_key.pem 2048

user_key部分は自由に変えてください。

※パスフレーズ（パスワード）なしで設定する時のコマンド

3. CSRの作成

CSR(Certificate Signing Request)とは、SSL証明書を作成する元になる情報が記載されているものです。 内容は、組織名やサーバのアドレスなどの方法です。

openssl req -new -key user_key.pem -out user_csr.pem

Country Name (2 letter code) [XX]:JP
State or Province Name (full name) []:Tokyo
Locality Name (eg, city) [Default City]:Chiyoda-ku
Organization Name (eg, company) [Default Company Ltd]:Example Inc.
Organizational Unit Name (eg, section) []:(※省略可）
Common Name (eg, your name or your server's hostname) []:example.com
Email Address []:(※省略可）
A challenge password []:(※省略可）
An optional company name []:(※省略可）

間違えないように気をつけて入力します。 作成した後は以下のようなサイトで確認します。

https://sstool.cybertrust.ne.jp/support_tool/index02.php

※コマンドでも確認できますが、今回は省略します。。。

4. 証明書ファイルの作成

証明書発行メール本文中にある（-----BEGIN CERTIFICATE-----） から （-----END CERTIFICATE-----）　までをコピーし、テキストエディタに貼り付け、証明書ファイルとして任意のファイル名で保存します。

証明書ファイル：example_crt.pem

中間証明書のファイル：example_chn.pem

この2つのファイルと秘密鍵ファイルを /etc/httpd/conf.d/ssl/ に置きます。

※このファイルを置く場所は任意の場所でよいです。

5. ssl.confの編集

Apacheの設定では、通常のhttp(ポート:80)の設定とは別に、https(ポート:443)の設定を行う必要があります。（SSLではポート番号は443）

mod_sslをインストールをすると/etc/httpd/conf.dにssl.confという新しいファイルが作成されるので編集します。

DocumentRoot、ServerName、秘密鍵、証明書、中間証明書の設定をします。

vi /etc/httd/conf.d/ssl.conf

<VirtualHost *:443>
... 
DocumentRoot "/home/user/www" # 77,78行目辺り
ServerName example.com:443

SSLCertificateFile /etc/httpd/conf.d/ssl/example_crt.pem　#106行目辺り　証明書ファイル
SSLCertificateKeyFile /etc/httpd/conf.d/ssl/example_key.pem　#112行目辺り　秘密鍵の設定
SSLCertificateChainFile /etc/httpd/conf.d/ssl/example_chn.pem　#123行目辺り　中間証明書のファイル
... 
</VirtualHost>

次にApache再起動です。

service httpd restart

https://example.comをブラウザで確認してちゃんと設定されていたら成功です。

最後にSSLのテストをして終わりです！

AWSでサーバー構築してみました。（つづき）

AWSでサーバー構築してみました。の続きの記事です。作業用ユーザーの追加と、Virtual Hostの設定、ベーシック認証について書いてます。

1. 作業用ユーザーを追加

新しいユーザー用にユーザーアカウントを作成します。

adduser コマンドを使用してユーザーアカウントを追加

[ec2-user ~]$ sudo adduser newuser

新しいアカウントに切り替えます。

ec2-userからnewuserに変わります。

[ec2-user ~]$ sudo su - newuser
[newuser ~]$

なんでユーザーを作るの？

デフォルトのユーザーアカウントを使用することは多くのアプリケーションで適切ですが、ユーザーアカウントを追加すると、個人が自分だけのファイルと作業場所を確保できます。新しいユーザー用にユーザーアカウントを作成することは、ec2-user アカウントへのアクセス権を複数のユーザーに (経験のないユーザーも含めて) 与えるよりも、はるかに安全です。これはアカウントが不適切に使用された場合、システムにさまざまな損害を与える可能性があるためです。

2.パーミッションの設定

newuserディレクトリのアクセス許可を 755(所有者のみ、書き込みが可能) に変更します。

chmod -R 755 /home/newuser

3 公開鍵の設置と設定

newuser ホームディレクトリに .ssh ディレクトリを作成し、そのファイルのアクセス許可を 700 (所有者のみ、読み取り、書き込み、削除が可能) に変更

[newuser ~]$ mkdir .ssh
[newuser ~]$ chmod 700 .ssh

authorized_keys という名前のファイルを .ssh ディレクトリに作成し、そのファイルのアクセス許可を 600 (所有者のみ、読み取りおよび書き込みが可能) に変更

[newuser ~]$ touch .ssh/authorized_keys
[newuser ~]$ chmod 600 .ssh/authorized_keys

viでauthorized_keys ファイルを開いて公開鍵を貼り付け。 変更を保存します。

[newuser ~]$ vi .ssh/authorized_keys

これで、authorized_keys ファイルに追加した公開鍵の対である秘密鍵を使用して、インスタンスの newuser アカウントにログインできます。

4. Virtual Hostの設定

Virtual Hostとは？

一台のサーバーで仮想的に複数のドメインを運用するサーバー技術の一種で、主にメールサーバーやWebサーバーなどで利用されています

httpd.confの設定

まず、VirtualHostを使う宣言をApacheの設定ファイルであるhttpd.confに記述します。

[newuser ~]$ sudo vi /etc/httpd/conf/httpd.conf

ServerName www.example.com:80
↓
ServerName パブリック IP

nameVirtualHost *:80 の記述をhttpd.confに追加。 （IncludeOptional conf.d/*.confの記述の上に書きました。）

virtual.confの設定

ファイルの名前はなんでもいいそうです。

IncludeOptional conf.d/*.confが書かれているのでApacheは起動時に/etc/httpd/conf.d/以下にある*.confファイルを全て読み込みます。

旧CentOSでは、httpd.confに全て記載していましたが、CentOS7からはメイン設定は、 「/etc/httpd/conf/httpd.conf」に記載され、その他の設定は「/etc/httpd/conf.d/」ディレクトリ内に分散設置しています。

conf.dに移動してvirtual.confファイルを作成します。

touch virtual.conf

virtual.confファイルを編集します。

vi virtual.conf

以下の記述を書いて保存します。

#newuser
<VirtualHost *:80>
    DocumentRoot /home/newuser/***
    ServerName www.****.com
    ErrorLog /home/newuser/logs/newuser-error_log
    CustomLog /home/newuser/logs/newuser-access_log combined
    <Directory /home/newuser/***>
        AllowOverride All
        Require all granted
        Options All
    </Directory>
</VirtualHost>

5. apacheの再起動

virtual.confを変更後、設定を有効にするためにhttpdを再起動します。

sudo systemctl restart httpd

ウェブブラウザで、www.****.comを入力し、ページが表示されたら成功です。

6. ベーシック認証をつけてみる

.htaccessファイルを作ります。

/home/newuser/***以下に作成します。

touch .htaccess

vi .htaccess

以下の記述を書いて保存します。

AuthUserFile /home/newuser/.htpasswd
AuthGroupFile /dev/null
AuthName StaffOnly
AuthType Basic
require valid-user

記述の解説

AuthUserfile /フルパス/.htpasswd

サーバーのルートディレクトリからの.htpasswdへのパスを指定

AuthGroupfile /dev/null

グループごとにアクセスを許可する、という指定。「/dev/null」とは、そのようなファイルは存在しないという意味でグループごとでのアクセス制限はしないという意味。

AuthName

ダイアログに表示される文章を指定。

AuthType Basic

AuthTypeを指定。「Basic（ベーシック認証）」と「Digest（ダイジェスト認証）」の2種類がある。

require valid-user

ユーザーが誰であろうと、入力したIDとパスワードが合っていればアクセスできるという意味。

.htpasswdファイルを作成します。

touch .htaccess

.htpasswdは、IDとパスワードを書きこむファイルです。

.htpasswdのファイルは、DocumentRootより上に設置します。

なので/home/newuser以下に作成します。

touch .htpasswd

パスワード暗号化ツールなどでパスワードを生成します。 http://www.luft.co.jp/cgi/htpasswd.php

できたパスワードを.htpasswdに記述します。

vi .htpasswd

500 Internal Server Error

.htaccess ファイルに文法誤りがあると、500 Internal Server Error となるので、再度確認します。

以上、はじめてのサーバー構築です...！

（これであってるのかな...）

AWSでサーバー構築してみました。

少しサーバーのこととか勉強したいなあ、と思ってAWSでサーバーを構築してみました。 とりあえず、インスタンスの作成、LAMPのインストール、apacheのテストページを表示させるところまでです。

1. アカウントの作成

アカウントを作成します。

2. AWSにサインイン

コンソールにログインします。

3. EC2のインスタンスを作成

EC2をクリックします。

インスタンスの作成をクリック。

OSを選びます。
とりあえずAmazon Linux 2 AMI (HVM), SSD Volume Type を選んでみました。

インスタンスタイプの選択をします。 無料枠のt2.microを選びました。

インスタンス作成の確認画面です。 確認ができたら、作成を押します。

4. キーペアの作成

サーバーへの接続は公開鍵認証になるので、秘密鍵を作成します。

新しいキーペアの作成を選択してキーペア名を入力し、
キーペアのダウンロードをクリックしてダウンロードします。

ダウンロードが完了したらインスタンスの作成をクリックします。

5. インスタンスの作成中

インスタンスの表示ボタンをクリックし、作成が成功していれば以下の画面になります。 インスタンスの状態がrunning、ステータスチェックが2/2のチェックに合格しましたであれば成功です。

6. サーバーに接続

接続ボタンをクリックすると、接続方法が書いてあるので、手順通りに進めます。

作成したキーは適宜置き場所を変えます。

windows環境だと、以下の手順で接続しました。

ssh ec2-user@パブリック IP -i C:\Users\キーの場所\*****.pem

7. LAMP ウェブサーバーをインストール

ブラウザからURLにアクセスしたいので、LAMPをインストールします。

LAMP?

Linux ＋ Apache ＋ MySQL ＋ PHP（Perl、Python）で構成される環境のこと

手順は以下のチュートリアル通りです。 https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ec2-lamp-amazon-linux-2.html

以下に手順を書いていますが、内容はさっきのURLと同じです。

1. ソフトウェアの更新を実行

すべてのソフトウェアパッケージが最新の状態であることを確認します。
$ sudo yum update -y

2. LAMP MariaDB と Amazon Linux 2 PHP パッケージの最新バージョンを取得

sudo amazon-linux-extras install lamp-mariadb10.2-php7.2 php7.2

3. Apache ウェブサーバー、MariaDB、PHP ソフトウェアパッケージをインストール

sudo yum install -y httpd mariadb-server

4. Apache ウェブサーバーを起動

sudo systemctl start httpd

5. systemctl コマンドを使用して、システムがブートするたびに Apache ウェブサーバーが起動するように設定

sudo systemctl enable httpd

httpd が有効であることを確認

sudo systemctl is-enabled httpd

6. インバウンド HTTP (ポート 80) 接続をインスタンスに許可する。

コンソールのセキュリティグループをクリック、アクションの中のインバウンドルールの表示を選択。

次の値で新しいインバウンドセキュリティルールを追加。

• Type: HTTP
• Protocol: TCP
• Port Range: 80
• Source: Custom

7. ウェブサーバーのテスト

ウェブブラウザで、インスタンスのパブリック DNS アドレス (またはパブリック IP アドレス) を入力します。

Apache テストページが表示されると成功です。

ふう。
次の記事はバーチャルホストの設定のこととかを書く予定です。。。

Vue.js + Vue-cli + bulmaで作るSPA

SPAを作ってみたいなあ、と思って実際に作ってみたのでメモです。

実際にページを作成してSPAを試してみたかったのでcssフレームワークbulmaを使って作りました。

こんな感じのページができます。

https://cidermitaina.github.io/spa-page/#/

（vue init webpackでできるVueアプリケーションの中身解説が多めです。bulmaの使い方は触れません。）

1.vue-cli のインストール

Vue.jsを使う環境を準備するためのコマンドラインインタフェースをインストールします。

vue-cliでインストールを行うとVue.jsの環境をものすごく簡単に構築できます。

npm install -g vue-cli

2.プロジェクトを作成

vue init webpack プロジェクト名

3. ローカルで確認する

cd プロジェクト名

npm run dev

ブラウザで http://localhost:8080/ をアクセスするとサンプルが表示されます。

4.Vueアプリケーションの中身は？

npm run build

をすると実際に動くソースが作られます。（./dist フォルダ）

├── dist
  ├── index.html
  └── static
      ├── css
      └── js

./dist/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>spa-site</title><link href=/static/css/app.30790115300ab27614ce176899523b62.css rel=stylesheet>
</head>
<body>
  <div id=app></div>
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js>
</script>
<script type=text/javascript src=/static/js/vendor.7fed9fa7b7ba482410b7.js>
</script>
<script type=text/javascript src=/static/js/app.b22ce679862c47a75225.js></script>
</body>
</html>

index.html → buid → ./dist/index.htmlになったみたいです。

./src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

./src/App.vueをコンポーネントとして登録しているようなので見てみます。

./src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<router-view/>?

vue-routerライブラリがパスに応じて表示するコンポーネントを切り替えています。

設定されているかというとsrc/router/index.jsです。

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

pathで'/'にアクセスすると、<router-view/>にHelloWorld.vueが表示される

import HelloWorld from '@/components/HelloWorld'の＠って？

webpack.base.conf.jsの

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }

にsrc ディレクトリの alias を定義しています。

Webpack を使っていてファイルの相対パスを書くのがつらくなったとき - kitak blog

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

dataで持っているmsgの値を{{ msg }}で表示しています。 Vue単一コンポーネントはコンポーネントスコープCSSという機能があり、<style scoped>の部分でスコープ宣言されてます。これによって、CSSが他のコンポーネントに影響を与えることなく分離し、CSSの管理がしやすくなります。

5. 中身を変更していく

中身が理解できたところで、編集してページを作成していきます。

1.ルーティングの設定

まずはコンポーネントファイルを作成します。 HelloWorld.vueをコピーして、必要なページ分作成します。 今回はtopページ、aboutページ、noteページ、apiページ、contactページを作成します。

├──components
  ├── about.vue
  ├── api.vue
  ├── contact.vue
  ├── note.vue
  └── top.vue

次にルーティングの設定です。

./router/index.jsを編集します。

import Vue from 'vue'
import Router from 'vue-router'
import top from '@/components/top'
import about from '@/components/about'
import note from '@/components/note'
import api from '@/components/api'
import contact from '@/components/contact'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'top',
      component: top
    },
    {
      path: '/about',
      name: 'about',
      component: about
    },
    {
      path: '/note',
      name: 'note',
      component: note
    },
    {
      path: '/api',
      name: 'api',
      component: api
    },
    {
      path: '/contact',
      name: 'contact',
      component: contact
    }
  ]
})

2.リンクの設定

次にApp.vueを編集してリンクをつけていきます。

<ul>
  <li>
    <router-link to="/">Top</router-link>
  </li>
  <li>
    <router-link to="about">About</router-link>
  </li>
  <li>
    <router-link to="note">Note</router-link>
  </li>
  <li>
    <router-link to="api">Api</router-link>
  </li>
  <li>
    <router-link to="contact">Contact</router-link>
  </li>
</ul>

これで仕組みは完成です。 あとは、ページを作成していきます。

3.bulmaのinstall

bulmaをinstallします。

npm install bulma

npm install bulma sass-loader node-sass --save-dev

App.vueにbulma本体のimportの記述を追記します。

<style lang="scss">
@import "../node_modules/bulma/bulma.sass";
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

これでbulmaを使って簡単にページを作成できるようになりました。

あとは、自由にbulmaを使ってページを作成していくだけです。

思ってたよりも簡単にできました◎

今回はbulmaを使ってページを作る手順は省略しますが、公式を見れば詳しく書いてあるので簡単に作れちゃうはずです。

bulma.io

今回作成したページのソースを参考に貼っておきます。

github.com

Go言語でhttpサーバーを立ち上げる

Go言語でHTTP通信をするには、net/httpパッケージを使用します。

package main

import (
    "io"
    "net/http"
)

func infoHandler(w http.ResponseWriter, r *http.Request) {
    // HTML テキストをhttp.ResponseWriteへ
    io.WriteString(w, `
  <!DOCTYPE html>
  <html lang="ja">
  <head>
  <meta charset="UTF-8">
  <title>hello</title>
  </head>
  <body>
  <h1>Hello World</h1>
  </body></html>
  `)
}

func main() {
    // /hello にアクセスした際に処理するハンドラーを登録
    http.HandleFunc("/hello", infoHandler)

    // サーバーをポート8080で起動
    http.ListenAndServe(":8080", nil)
}

ハンドラ関数の定義

HTTPリクエスト発生時に呼び出される具体的な処理が書かれています。(infoHandler関数) ハンドラ関数は、必ず以下形で定義します。

func 関数名(w http.ResponseWriter, r *http.Request) {
    // 実行する処理
}

http.ResponseWriterインタフェース

ハンドラ関数の第一引数には、http.ResponseWriterインタフェース型のオブジェクトが渡されます。 このオブジェクトはHTTPレスポンスヘッダへの値セットや、HTTPレスポンスボディへの出力に使用します。

ioパッケージ

基本的な入出力のための型とインターフェイスがまとめられたパッケージ。

WriteString関数

func WriteString(w Writer, s string) (n int, err os.Error)

WriteStringは、wに文字列sの内容を書きこみます。

ハンドラ関数の登録

main関数内でhttp.HandlerFunc関数を使用することで、 アクセスパスとハンドラ関数を結びつけています。

http.HandleFunc("/hello", infoHandler)

サーバの起動

全てのハンドラ関数の登録が完了したら、サーバの起動を行います。

http.ListenAndServe(":8080", nil)

プログラムを実行するには？

基本的には、go run hoge.goもしくはgo build hoge hoge.go | ./hogeとすることで実行することができます。

go build

goはコンパイル型言語なので、CやJavaのように基本的にはコンパイルする必要があります。

go build [コンパイル後のファイル名] [コンパイルしたいファイル名]

コンパイルし,コンパイル後のバイナリファイルを実行するには

./[コンパイル後のファイル名]

で実行します。

go run

自動的にコンパイル・実行してくれる便利なコマンド。

go run ファイル名

コンパイルして実行せずに実行できます。

webpackについて丁寧に。

webpack4になったので、これを機に丁寧に理解したいなあ、と思ってまとめました。 自分用メモです。

webpackとは

モジュールバンドラのこと。 まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。

モジュールバンドラ
複数のモジュールを1つにまとめたファイルを出力する
ツールのこと

なんでモジュールバンドラを使うの？

• 機能ごとにファイルを分割（モジュール化）できるから
• 自分が作成したモジュールだけではなく、外部モジュール（npmなどでインストールできるパッケージなど）も利用できるから
• リクエスト数を減らせるから
• 依存関係を解決したファイルを出力できるから
  
  自分が作成したモジュールだけではなく、外部モジュール（npmなどでインストールできるパッケージなど）も利用できます。
  
  
  

ファイルを分割（モジュール化）するメリットは？

• コードが見やすくなる
• 名前空間を生成できる（変数の競合やグローバル汚染を防ぐ）
• モジュールの保守性を高められる
• モジュールの再利用性を高められる
  
  
  

webpackを使ってみる

実際にwebpackを使う手順です。

1. webpackローカルインストール

npm install webpack --save-dev
or
yarn add webpack --dev

2. webpack-cliのインストール

webpackコマンドでwebpackを実行するために、以下のコマンドでwebpack-cliをインストールします。
（webpack 4から必要になったみたいです。）

npm install webpack-cli --save-dev
or
yarn add webpack-cli --dev

3. webpack.config.jsの設定

webpack.config.jsとは？

webpackの設定ファイルのことです。

// output.pathに絶対パスを指定する必要があるため、pathモジュールを読み込んでおく
const path = require('path');

module.exports = {
  // モードの設定、v4系以降はmodeを指定しないと、webpack実行時に警告が出る
  mode: 'development',
  // エントリーポイントの設定
  entry: './src/js/app.js',
  // 出力の設定
  output: {
    // 出力するファイル名
    filename: 'bundle.js',
    // 出力先のパス（v2系以降は絶対パスを指定する必要がある）
    path: path.join(__dirname, 'public/js')
  }
};

4. webpackコマンドで実行

npx webpack

or

npm run webpack

or

yarn webpack

を実行するとbundle.jsという名前のファイルがpublic/js/配下に出力されます。

webpack.config.jsを詳しく

webpack.config.jsの設定に関してさらっと流しちゃったので、詳しくまとめます。

module.exports = {
    mode: 'development',
    entry:'./src/assets/js/main.js',
    output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'public/assets/js')
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
}

1. mode

モードはdevelopment、production、noneが存在します。

・production

productionにすれば、何も指定しなくてもコードが圧縮されます。 自分で設定をカスタマイズする場合は、uglifyjs-webpack-pluginというプラグインが必要になります。

たとえば、

bundleしたソースのconsoleを消す

uglifyjs-webpack-pluginをinstallします。

npm install uglifyjs-webpack-plugin --save-dev

or

yarn add uglifyjs-webpack-plugin --dev

or

const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public/js'),
  },
  optimization: {
    minimizer: [
      new UglifyJSPlugin({
        uglifyOptions: {compress: {drop_console: true}},
      }),
    ],
  },
};

www.npmjs.com

・development

差分ビルドの高速化がされている。

・none

すべての設定が無効。

2. entry

出力の設定

3. output

出力の設定。 出力するファイル名や出力先のパスを指定する。 OSによってパスが異なることを防ぐために、出力先のパスの指定にはpath.join()を利用

4. loader

画像やCSSなどのJavaScript以外のファイルをJavaScriptで扱えるように変換したり、バンドルする前にモジュールに対して実行する機能のことです。 TypeScriptをJavaScriptに変換、画像をDataURLに変換、コードをチェックするなど、ローダーによって機能は様々。 js以外のどんなファイルでもloaderさえ使えば読み込むことができます。

module: {
    rules: [
        {
        // 拡張子 .js の場合
            test: /\.js$/,
            exclude: /node_modules/// node_modules は除外する
            //利用するローダー
            use: [{
                  loader: 'babel-loader',// Babel を利用する
                  options: {
                      presets: ['env']
                  }
            }],
        }
    ]
}

babel-loader
ES2015（ES6）のコードをES5のコードに変換するローダー。

www.npmjs.com

って感じです。

node,jsの続きを書こう書こうと思って、webpackのを書いちゃいました。。。 忘れないうちにnode.jsの続きも書こうと思います。

音楽のことも書きたい...