2020-08-31

Nuxt.jsの基礎勉強-surgeを使ってwebに公開してみた-

Nuxt.js Vue.js surge

はじめに

今回はNuxt.jsの勉強の一環として、適当なウェブページを作成したので、そのページをsurgeにデプロイした話についてまとめる。

完成ページ

nuxt-example-page

surgeとは

基本無料で使えるデプロイ先になります。(SSLの発行や多数のプロジェクトをアップするのは有料版になるっぽい)

Pricing • Surge

surgeにデプロイする

ここを参考にsurgeにデプロイしてみる。

Surge へデプロイするには？ - NuxtJS

surgeのインストール

$ npm install -g surge

アップロードするプロジェクトをビルドする

$ npm run generate

surgeにデプロイ

$ surge ./dist

この時にメールアドレス等聞かれるので、会員登録し、メールアドレスを有効化するとデプロイできる。

surgeのその他コマンド

-surge - npm - 無料で手軽！コマンド一つで静的サイトホスティングできるSurgeを試してみた。 | dotstudio

プロジェクト一覧

$ surge list

プロジェクトの破棄

$ surge teardown プロジェクト名

終わりに

surgeを使うメリットとしては、簡易的なwebページをすぐあげれることかなと思う。その一方で、SSL等は有料になるので、無料版だと個人情報のやりとりを行うweb appを上げる際は注意が必要になってくる。

2020-08-30

Nuxt.jsの基礎勉強-画像のスライドを作ってみた-

Vue.js Nuxt.js

はじめに

今回は画像のスライド機能を作ってみた話についてまとめていく。

画像をスライドした

文字列のスライドを参考にした

色々調べてみたら文字列で実装している方がいたので、このコードを動かしてみることにしました。

JS Bin - Collaborative JavaScript Debugging

文字列から画像に変更を加える

参考記事

【Vue.js】なぜかimgが表示されない時の解決法とその理由 - ryoのぼやき

問題

参考記事によるとv-bindの読み込み時のコンパイル方法により、画像などの変数で与えたパスを読み込む際にパス情報が誤った情報として読み込まれてしまう問題がある。

その結果、<img :src="">でうまく画像を読み込めないというバグが発生する。

解決方法

上記記事の方法で個人的に使用しやすいrequireを用いた方法を利用した。

      products: [
        require('@/assets/hoge.jpg'),
        require('@/assets/huga.jpg'),
        require('@/assets/hogege.jpg'),
      ]

自分のソースに落とし込む

template部分

<template>
  <div>
    <button @click="beforeSlide">
      前
    </button>
    <button @click="nextSlide">
      次
    </button>
    <transition name="slide">
      <div :key="products[product]">
        <img :src="products[product]" class="img-size">
      </div>
    </transition>
  </div>
</template>

script部分

参考プログラムだとnextSlide()がワンライナーで読みづらかったので、通常のif文に落とし込んだ。

また、自動スライド機能に関してはいらなかったので消して、代わりにbeforeSlide()機能を追加した。

<script>
export default {
  data: function() {
    return {
      product: 0,
      products: [
        require('@/assets/hoge.jpg'),
        require('@/assets/huga.jpg'),
        require('@/assets/hogege.jpg'),
      ]
    }
  },
  methods: {
    nextSlide: function() {
      if(this.product < this.products.length - 1){
        this.product += 1
      }else{
        this.product = 0
      }
    },
    beforeSlide: function() {
      if(this.product > 0){
        this.product -= 1
      }else{
        this.product = this.products.length - 1
      }
    }
  }
}
</script>

style部分

参考プログラムだと

leave処理が遅くてenter処理と被ることがある

そのため、以下の処理に変更した

leave処理を早くする
leave処理を消えるだけにする

<style>
.slide-enter-active {
  transition: transform 0.75s
}
.slide-leave-active{
  transition: transform 0s
}
.slide-enter {
  transform: translateX(300px)
}
.slide-leave {
  transform: opacity 0
}

.img-size{
  position: absolute;
  width: 100%;
}
</style>

終わりに

今回はv-bindでの画像読み込みや<style>のhoge-enterやhoge-leaveなどの挙動について学ぶことができた。

2020-08-29

Nuxt.jsの基礎勉強-vue-scrolltoを使ってみた-

Nuxt.js Vue.js vue-scrollto

はじめに

今回はボタンを押したら任意の場所までスクロールしてくれる機能をvue-scrolltoを用いて実装した話についてまとめていく。

環境設計

vue-scrolltoとは

v-scroll-toディレクティブを拡張してくれるプラグインのことです。

公式ページ
- vue-scrollto - npm
別途参考にしたページ
- 【Nuxt.js】plugin実践編：vue-scrolltoでスムーズにスクロール｜aLiz｜note

npmからインストールする

$ npm install --save vue-scrollto

pluginに追加する

plugins/vue-scrollto.jsにインストールしたvue-scrolltoを使用する設定を記述する。

import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo, {
 duration: 700,
 easing: [0, 0, 0.1, 1],
 offset: -100,
})

nuxt.config.jsにpluginを読み込む設定を記述する。

export default {
(略)

  plugins: ['~plugins/vue-scrollto'],

(略)
}

vue-scrolltoを使ってみる

pages/sample.vueにて以下のサンプルプログラムを動かして挙動の確認をする。

<template>
 <div class="page">
   <a v-scroll-to="'#anchor'">
     下にとぶ
   </a>
   <div id="anchor" class="test">
     とべた！
   </div>
 </div>
</template>

<style>
.test{
  margin-top: 1000px; 
}
</style>>

終わりに

この拡張機能を使うことで先日作成したナビゲーションバーにv-scroll-toディレクティブを用いることに成功した。

2020-08-28

Nuxt.jsの基礎勉強-Nuxt.jsでBootStrapを使ってみる-

Bootstrap4 Nuxt.js Vue.js

はじめに

今回はNuxt.jsの基礎勉強としてBootStrapをNuxt.jsに組み込んでみた話についてまとめる。

初期設定

create-nuxt-appコマンドでアプリを作成した時の質問にてBootStrapの使用について聞かれるのでBootStrapを選んで進める。

$ npx create-nuxt-app アプリ名
~省略~
UI framework: 
Bootstrap

公式ドキュメント

BootStrapを使ってみる

Navbar | Components | BootstrapVueに沿ってnavbarを作ってみた。

components/navbar.vue

<template>
  <div>
    <b-navbar toggleable="lg" type="dark" variant="primary">
      <b-navbar-brand href="/output">
        KKZoo
      </b-navbar-brand>

      <b-navbar-toggle target="nav-collapse" />

      <b-collapse id="nav-collapse" is-nav> 
        <!--右揃えのナビゲーションアイテム--> 
        <b-navbar-nav class="ml-auto"> 
          <b-nav-item href="/output">
            TOP
          </b-nav-item> 
          <b-nav-item href="＃">
            Page1
          </b-nav-item> 
          <b-nav-item href="＃">
            Page2
          </b-nav-item>
        </b-navbar-nav> 
      </b-collapse> 
    </b-navbar>
  </div>
</template>

pages/output.vue

<template>
  <section>
    <navbar />
  </section>
</template>

<script>
import navbar from '~/components/navbar.vue'

export default {
    components: {
        navbar
    }      
}
</script>>

終わりに

今回はBootStrapをNuxt.jsにて使ってみたが、普通にHTMLに組み込む時と違ってclass名が少し変わっていることに注意が必要だなと感じた。

2020-08-27

Nuxt.jsの基礎勉強-ESlintをつかってみた-

ESlint Nuxt.js Vue.js

はじめに

今回はNuxt.jsの勉強としてESlintを用いたコードフォーマットチェックと自動調整を行なったことについてまとめる。

ESlintのインストール

開発ツール - NuxtJSの公式に沿ってESlintのみをインストールすることにした。

$ npm install --save-dev babel-eslint eslint eslint-plugin-vue

ESlintの設定

.eslintrc.jsに以下の設定を記述。

※ rules:以下に書かれているのが今回のESlintのルールになる。

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
  extends: [
    'eslint:recommended',
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/recommended',
  ],
  // required to lint *.vue files
  plugins: ['vue'],
  // add your custom rules here
  rules: {
    semi: [2, 'never'],
    'no-console': 'off',
    'vue/max-attributes-per-line': 'off',
  },
}

package.jsonにコマンドのショートカットを登録する。

  "scripts": {
    (中略)
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
  },

ESlintを使ってみる

上記設定をした後に以下のコードを打つことで.jsと.vueファイルをチェックしてくれる。(lintはチェックのみ)

$ npm run lint

また、lintfixをすることで自動でコードを調整ある程度してくれる。

$ npm run lintfix

終わりに

以前rubocopを使ったことがあったおかげでESlintの概要を掴みやすかった。

2020-08-23

VitualBoxにてWordPressを立ち上げた話

VirtualBox WordPress

はじめに

今回は前回までに立てたVirualBoxのLAMP環境にてWordPressを立ち上げてみた件についてまとめていく。

wget コマンドをyumからインストール

wget を用いてWordPressをインストールするので、wgetをインストールする。

$ yum install wget

WordPressの設定

wgetを用いて公式からWordPressを`/tmp`内にインストールする。

$ cd /tmp
$ wget wordpressのurl

ダウンロード | WordPress.org 日本語

ここから.tar.gzをダウンロードのリンクからURLを取得してくる。

wordpressを`/var/www/`に解凍する

$ tar -xzvf WordPressのjarファイル -C /var/www/

WordPressをDocumentRootに適用する

バックアップを取った後にapacheの設定を書き換える

$ sudo cp /etc/httpd/conf/httpd.conf /etc/httpd/conf/httpd.conf.org
$ sudo vi /etc/httpd/conf/httpd.conf

DocumentRoot "/var/www/html" # 変更前
DocumentRoot "/var/www/wordpress" # 変更後

wordpressのパーミッションをapacheに変更する。

$ cd /var/www/
$ sudo chown apache:apache -R wordpress/

apacheの変更を反映する。

$ sudo systemctl restart httpd

wordpress用のdatabaseを作成する

$ mysql -u root -p 
mysql> create database wp_myblog;
mysql> create user 'kkzoo'@'localhost' identified with mysql_native_password by 'パスワード';
mysql> grant all privileges on wp_myblog.* to 'kkzoo'@'localhost';
mysql> flush privileges;

※flush privilegesの権限反映はやらなくてもいいかもしれない。

ユーザ権限の確認・追加 - Qiita

WordPressを開く

ipアドレスを取得して、そのページをブラウザで開く。

$ ip addr

WordPressのWebページでの初期設定

データベースの初期設定は

データベース名 : wp_myblog
データベースにアクセスするユーザー名 : kkzoo
データベースのパスワード : 上記ユーザーのパスワード
メールアドレス : 自分のメールアドレス

これでインストールできたら完了。

終わりに

実際にLAMP環境で動かすものの例として、WordPressを簡易的に立ててみたが/var/www/配下にこのサーバーで動かすアプリを置き、apacheの設定をそのアプリに変更する点が肝なのかなと感じた。

2020-08-22

VirtualBoxのCentOS7にてLAMP環境の構築練習をした話

VirtualBox

はじめに

今回はLAMP環境の構築練習として前回作ったVirtualBox内のローカル環境を利用したのでそれについてまとめていく。

LAMP環境とは

以下の環境で構築されているwebサービスの事

yumのupdate

$ sudo yum update

EPELリポジトリとRemiリポジトリ

EPELリポジトリとは

Linuxのパッケージセットがあるリポジトリのこと。

CentOSなどで使う、EPELってなんだ？ - Qiita

EPELを使う

$ sudo yum install epel-release

Remiリポジトリとは

Remi Colletさんが運営しているリポジトリで、PHPやMySQLの最新版を管理している。

CentOSなどで使う、Remi Repositoryってなんだ？ - Qiita

Remiリポジトリを使う

$ sudo yum install パッケージURL

Remi's RPM repository

このサイトのCentOS7のreleaseのprmファイルのリンクをパッケージURLとして貼る。

f:id:kkzoo__52:20200821002431p:plain

apacheのインストール

yumでapacheをインストールする

$ sudo yum install httpd

apacheが入ったことの確認

$ httpd -v

自動でapacheが起動するように設定し、再起動した際にapacheが動いていることを確認。

$ sudo systemctl enable httpd
$ sudo reboot
$ sudo systemctl status httpd

CentOS7の自動起動設定 - Qiita

apacheの設定

http通信に使うポート80を開ける

$ sudo firewall-cmd --permanent --zone=public --add-service=http

https通信に使うポート443を開ける

$ sudo firewall-cmd --permanent --zone=public --add-service=https

今回行なった設定を読み込む

$ sudo firewall-cmd reload

【すぐわかる】CentOSのポート開放のやり方

ローカル環境で勉強のため一時的にSELINUXを止める

$ sudo vi /etc/selinux/config

SELINUX=enforcing # 編集前
SELINUX=disabled   # 編集後

設定を読み込んだ後にSELINUXの挙動を確認。(disabledと表示されれば止まっている)

$ sudo reboot
$ getenforce

Apacheの起動確認

ipアドレスを取得する。(今回の場合enp0s3のinetを確認)

$ ip addr

上記で取得したIPアドレスに検索エンジンから飛ぶ。

Hello Apacheを出力

Apacheのhtmlファイルの場所を確認し、DocumentRootを探す。

$ less /etc/httpd/conf/httpd.conf

DocumentRoot "/var/www/html" # これが見つかるはず

/var/www/html/index.htmlを作成。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Apacheの練習</title>
  <head>
  <body>
    <p>Hello Apache</p>
  </body>
</html>

permissionの問題があるのでapcheに権限を移行し確認する。

$ sudo chown apache:apache /var/www/html/index.html
$ ls -l /var/www/html/index.html

ここまでの設定をしたら先ほどのIPアドレスに検索エンジンからアクセスして、Hello Apacheと出力されるサイトが出てきたら設定完了。

PHPのインストール

remiリポジトリからphpをインストールする。

今回は学習教材にて以下の拡張モジュールを同時にインストールしていたのでワンラインで一気にインストールする。

php
php-devel (phpの開発モジュール)
php-mysql (phpのmysql開発モジュール)
php-gd (phpの画像処理モジュール)
php-mbstring (phpの日本語処理モジュール)

$ sudo yum --enablerepo=remi-php71 install php php-devel php-mysql php-gd php-mbstring

上記処理が終わったらphpの確認をする。

$ php -v

設定を更新するためにapacheを再起動する。

$ sudo systemctl restart httpd

Hello PHPの出力

/var/www/html/index.phpを作成。

<?
echo 'Hello PHP';

apacheに権限を付与。

$ sudo chown apache:apache /var/www/html/index.html

検索エンジンからIPアドレス/index.phpに飛んでHello PHPと出力されていたら完了。

MySQLのインストール

CentOSに入っているデフォルトのDBを削除

$ sudo yum remove mariadb-libs
$ sudo rm -rf /var/lib/mysql

MySQL5.7系をリポジトリを設定する。

$ sudo yum localinstall URL

Red Hat Enterprise Linux 7系のURLを貼る。 MySQL :: Download MySQL Yum Repository

MySQLをインストールし、確認する。

$ sudo yum install mysql-community-server
$ mysqld --version

MySQLの設定

MySQLを起動して、初期パスワードを確認。

$ sudo systemctl start mysqld
$ suco cat /var/log/mysqld.log | gerp 'temporary password'

MySQLの初期パスワードのありか - Qiita

mysqlが動くか確認

$ mysql -u root -p

mysqlの初期文字列をUTF-8に変更

$ sudo vi /etc/my.cnf

/etc/my.cnfの最下部に以下を追記

character-set-server = utf8

MySQLを再起動して設定を反映させる

$ sudo systemctl restart mysqld

サーバー構築なのでMySQLをサーバー立ち上げと共に動くように設定し、確認する。

$ sudo systemctl enable mysqld
$ systemctl list-unit-files -t service | grep mysqld

終わりに

今回はローカルでLAMP環境を構築することでwebサービスの概要をつかむことができたと共にサーバーサイドのイメージも少しつけることができた。

はじめに

完成ページ

surgeとは

surgeにデプロイする

surgeのインストール

アップロードするプロジェクトをビルドする

surgeにデプロイ

surgeのその他コマンド

プロジェクト一覧

プロジェクトの破棄

終わりに

はじめに

画像をスライドした

文字列のスライドを参考にした

文字列から画像に変更を加える

問題

解決方法

自分のソースに落とし込む

template部分

script部分

style部分

終わりに

はじめに

環境設計

vue-scrolltoとは

npmからインストールする

pluginに追加する

vue-scrolltoを使ってみる

終わりに

はじめに

初期設定

BootStrapを使ってみる

components/navbar.vue

pages/output.vue

終わりに

はじめに

ESlintのインストール

ESlintの設定

ESlintを使ってみる

終わりに

はじめに

wget コマンドをyumからインストール

WordPressの設定

wgetを用いて公式からWordPressを/tmp内にインストールする。

wordpressを/var/www/に解凍する

WordPressをDocumentRootに適用する

wordpress用のdatabaseを作成する

WordPressを開く

WordPressのWebページでの初期設定

終わりに

はじめに

LAMP環境とは

yumのupdate

EPELリポジトリとRemiリポジトリ

EPELリポジトリとは

EPELを使う

Remiリポジトリとは

Remiリポジトリを使う

apacheのインストール

apacheの設定

Apacheの起動確認

Hello Apacheを出力

PHPのインストール

Hello PHPの出力

MySQLのインストール

MySQLの設定

終わりに

wgetを用いて公式からWordPressを`/tmp`内にインストールする。

wordpressを`/var/www/`に解凍する