【GitHub】remote: Invalid username or password.
GitHubにPushしようとした時にエラーになるときの備忘録 僕の場合は、GitHubを２段階認証に設定していたことが原因でした。 参考サイト 1分でできるGithubの2段階認証の設定
CATEGORY 備忘録
認証（JWT）と認可（djoser）の違い
Djangoで認証関連のライブラリを調べていた時に、認証と認可の違いを理解していなくて時間を取られたので、メモ JWTは認証を行うためのライブラリ、 djoserは認可を行うライブラリです。
DjangoとMySQLを接続する
DjangoとMySQLを接続した時の備忘録です。 MySQLの設定を確認 Django側の設定で必要な項目は、 データベース名 ユーザー名（権限を持っている） ユーザーのパスワード ホスト名 ポート番号 です。これらを実際に調べていきます。 MySQLサーバーへ入る
|
1 2 |
[vagrant@localhost ~]$ mysql -u Admin -pP@ssw0rd ⬆️ユーザーのパスワード |
¥sでデータベースの情報を取得します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
mysql> \s -------------- mysql Ver 14.14 Distrib 5.7.29, for Linux (x86_64) using EditLine wrapper Connection id: 4 Current database: ⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️使うのはこれ！！！ Current user: Admin@localhost SSL: Not in use Current pager: stdout Using outfile: '' Using delimiter: ; Server version: 5.7.29 MySQL Community Server (GPL) Protocol version: 10 Connection: Localhost via UNIX socket Server characterset: latin1 Db characterset: latin1 Client characterset: utf8 Conn. characterset: utf8 UNIX socket: /var/lib/mysql/mysql.sock Uptime: 16 min 29 sec Threads: 1 Questions: 24 Slow queries: 0 Opens: 113 Flush tables: 1 Open tables: 106 Queries per second avg: 0.024 -------------- |
ユーザー名：Admin ホスト名：loaclhost になります。 ユーザーの作成方法、権限を付与する方法などは、公式ドキュメントを参照してみてください。 【MySQL】公式マニュアル 作成したデータベース名は"DiaryApp"にしました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
mysql> create database DiaryApp; Query OK, 1 row affected (0.00 sec) mysql> show databases; +--------------------+ | Database | +--------------------+ | information_schema | | DiaryApp | | mysql | | performance_schema | | sys | +--------------------+ 5 rows in set (0.00 sec) |
Django側の設定 次は、Django側の設定です。 setting.pyに設定を足すのと、models.pyを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'DiaryApp', 'USER': 'Admin', 'PASSWORD': 'P@ssw0rd', 'HOST': '', 'PORT': '3306', 'OPTIONS': { # 制約を厳しくチェック 'sql_mode': 'traditional', }, } } |
|
1 2 3 4 5 6 7 8 9 10 11 |
# coding: utf-8 from django.db import models from datetime import date class Diary(models.Model): date = models.DateField(default=date.today, primary_key=True) title = models.CharField(max_length=128) body = models.TextField() created_at = models.DateTimeField(auto_now_add=True) updated_at = models.DateTimeField(auto_now=True) publishing = models.BooleanField(default=True) |
マイグレーション models.pyに書いた「モデル」をデータベースに反映させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
[vagrant@localhost diary_app]$ python manage.py makemigrations [app名] [vagrant@localhost diary_app]$ python manage.py migrate Operations to perform: Apply all migrations: admin, auth, contenttypes, sessions Running migrations: Applying contenttypes.0001_initial... OK Applying auth.0001_initial... OK Applying admin.0001_initial... OK Applying admin.0002_logentry_remove_auto_add... OK Applying admin.0003_logentry_add_action_flag_choices... OK Applying contenttypes.0002_remove_content_type_name... OK Applying auth.0002_alter_permission_name_max_length... OK Applying auth.0003_alter_user_email_max_length... OK Applying auth.0004_alter_user_username_opts... OK Applying auth.0005_alter_user_last_login_null... OK Applying auth.0006_require_contenttypes_0002... OK Applying auth.0007_alter_validators_add_error_messages... OK Applying auth.0008_alter_user_username_max_length... OK Applying auth.0009_alter_user_last_name_max_length... OK Applying auth.0010_alter_group_name_max_length... OK Applying auth.0011_update_proxy_permissions... OK Applying sessions.0001_initial... OK |
MySQLに入って、正しくテーブルが作られているか確認してみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
mysql> use DiaryApp Reading table information for completion of table and column names You can turn off this feature to get a quicker startup with -A Database changed mysql> show tables; +----------------------------+ | Tables_in_DiaryApp | +----------------------------+ | auth_group | | auth_group_permissions | | auth_permission | | auth_user | | auth_user_groups | | auth_user_user_permissions | | diary_app_diary | | django_admin_log | | django_content_type | | django_migrations | | django_session | +----------------------------+ 11 rows in set (0.00 sec) |
CentOS 7にMySQLをインストールする
はじめに
|
1 2 3 4 |
# MySQLをインストール yum localinstall http://dev.mysql.com/get/mysql57-community-release-el7-7.noarch.rpm yum info mysql-community-server sudo yum install -y mysql-community-server |
とやったあとの初期設定でハマったので備忘録。 初期パスワードの確認 rootでMySQLに入ろうとすると、パスワードが必要というエラーが出てしまうので、初期設定されているパスワードを確認する必要があります。
|
1 2 3 |
[vagrant@localhost ~]$ mysql -u root mysql: [Warning] Using a password on the command line interface can be insecure. ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES) |
/var/log/mysqld.logに残っている、初期設定時のログからパスワードを確認します。
|
1 2 3 4 5 6 7 8 9 |
[vagrant@localhost ~]$ sudo cat /var/log/mysqld.log 2020-02-27T16:00:23.460496Z 0 [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defaults_for_timestamp server option (see documentation for more details). 2020-02-27T16:00:23.741340Z 0 [Warning] InnoDB: New log files created, LSN=45790 2020-02-27T16:00:23.796645Z 0 [Warning] InnoDB: Creating foreign key constraint system tables. 2020-02-27T16:00:23.855279Z 0 [Warning] No existing UUID has been found, so we assume that this is the first time that this server has been started. Generating a new UUID: 4352063e-597a-11ea-acf0-5254008afee6. 2020-02-27T16:00:23.856630Z 0 [Warning] Gtid table is not ready to be used. Table 'mysql.gtid_executed' cannot be opened. 2020-02-27T16:00:25.340051Z 0 [Warning] CA certificate ca.pem is self signed. 2020-02-27T16:00:25.804182Z 1 [Note] A temporary password is generated for root@localhost: kJbD+Z6UfPYD ⬆️⬆️⬆️パスワード |
確認できたら、MySQLサーバーへログインし、初期設定のパスワードを変更しましょう。
|
1 2 |
mysql> set password for root@localhost=password('P@ssw0rd!'); Query OK, 0 rows affected, 1 warning (0.00 sec) |
変更したパスワードでMySQLに入れることを確認
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
mysql> quit Bye [vagrant@localhost ~]$ mysql -u root -pP@ssw0rd! mysql: [Warning] Using a password on the command line interface can be insecure. Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 4 Server version: 5.7.29 Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved. Oracle is a registered trademark of Oracle Corporation and/or its affiliates. Other names may be trademarks of their respective owners. Type 'help;' or '\h' for help. Type '\c' to clear the current input statement. mysql> quit Bye |
パスワードの変更（追記） MySQLのパスワードポリシーにあったパスワードを設定していないと
|
1 2 |
mysql> \s ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing this statement. |
というエラーが出るので追記。 パスワードポリシーの初期設定は以下の通り
|
1 |
mysql> SHOW VARIABLES LIKE 'validate_password%'; |
Variable_name Value validate_password_check_user_name OFF validate_password_dictionary_file validate_password_length 8 validate_password_mixed_case_count 1 validate_password_number_count 1 validate_password_policy MEDIUM validate_password_special_char_count 1 参考：【Qiita】mysql5.7でパスワードを変更する
Djangoでmigrationのやり直しが上手くいかない
Djangoのmigrationをやり直したくなったけれど、色々試したら、
|
1 |
python manage.py migrate |
で psycopg2.errors.UndefinedColumn: column "<field名>" does not existといったエラーが出て、後戻りできなくなったりする。 僕みたいによく分かってない人は、一度全部消してからやり直したほうが絶対早い。 djangoでmigrateができない 下のコマンドは、同じSchemaのテーブルを全削除するコマンド。
|
1 2 |
drop schema public cascade; create schema public; |
これを実行してからマイグレーションすれば確実。
you cannot alter to or from M2M fields, or add or remove through= on M2M fields
|
1 |
python manage.py migrate |
で、
|
1 |
you cannot alter to or from M2M fields, or add or remove through= on M2M fields |
のエラーで苦しめられたので備忘録。 "Django migration error :you cannot alter to or from M2M fields, or add or remove through= on M2M fields"(stack overflow) 要は、DBを作る時に、古いテーブルが邪魔をしてmigrationできないよ！ と言うことらしい。 上記リンクに飛ぶと、initial.pyでFieldを消す処理を加えると言う対応を紹介していたが、 面倒だったので、テーブルをいったん消去して、もう一度migrationをかけて解決した。
‘npm run serve’ができない〜nodeのバージョン管理〜
普段、何も考えずに〇〇 updateと打ち込んでしまっているため、その戒めとしての備忘録 ちゃんとバージョン管理ソフトは使いましょう。。。 今回ハマったエラーはこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: [BABEL] /Users/kouki/Projects/vue-login-sample/src/main.js: Package exports for '/Users/kouki/Projects/vue-login-sample/node_modules/@babel/helper-compilation-targets' do not define a '.' subpath (While processing: "/Users/kouki/Projects/vue-login-sample/node_modules/@vue/cli-plugin-babel/preset.js") at applyExports (internal/modules/cjs/loader.js:485:15) at resolveExports (internal/modules/cjs/loader.js:508:12) at Function.Module._findPath (internal/modules/cjs/loader.js:577:20) at Function.Module._resolveFilename (internal/modules/cjs/loader.js:879:27) at Function.Module._load (internal/modules/cjs/loader.js:785:27) at Module.require (internal/modules/cjs/loader.js:956:19) at require (internal/modules/cjs/helpers.js:74:18) at Object.<anonymous> (/Users/kouki/Projects/vue-login-sample/node_modules/@babel/preset-env/lib/debug.js:8:33) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1103:10) at Module.load (internal/modules/cjs/loader.js:914:32) at Function.Module._load (internal/modules/cjs/loader.js:822:14) at Module.require (internal/modules/cjs/loader.js:956:19) at require (internal/modules/cjs/helpers.js:74:18) at Object.<anonymous> (/Users/kouki/Projects/vue-login-sample/node_modules/@babel/preset-env/lib/index.js:11:14) at Module._compile (internal/modules/cjs/loader.js:1063:30) @ multi (webpack)-dev-server/client?http://192.168.3.3:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js |
vue create → npm run serveなので特にエラーを起こすような操作はしていません。 「babel」, 「webpack」と言った文字列が見えたのでおそらくnodeのバージョンの問題だろうと思って確認してみると、
|
1 2 |
>>> node -v v13.1.0 |
いや、もうほんとLTSとかちゃんと見とかないとダメですね 笑 何も考えずにパッケージのアップデートをしたのは誰なんでしょうか 笑 nパッケージを導入 これまで素のnodeを使っていたため、パッケージ管理ソフトを入れることにしました。 nodeのバージョン管理にはnパッケージと言うものがあるらしいのでこれをインストール
|
1 2 3 4 5 6 |
>>> npm install -g n /usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n + n@6.1.3 added 1 package from 4 contributors in 0.553s >>> n --stable 12.14.1 |
n現在の安定版を確認してみると、v１２だったため
|
1 2 3 4 |
>>> sudo n 12.14.1 installed : v12.14.1 (with npm 6.13.4) >>> node -v v12.14.1 |
として、nodeを安定版に変更すると、無事にnpm run serveを通すことができました。 めんどくさいけど、バージョン管理はするようにしよう。
子コンポーネントから親コンポーネントへのデータの受け渡し〜$emitを使って〜
Vueでは、コンポーネント間の関係はした図のように、ツリー状になっており、上から下へのデータの受け渡しは、propを使って行っていました。 ツリーの下から上にデータを渡すときは、少し大変なようで、親コンポーネントが子コンポーネントのイベントを購読することによって実現するようです。「購読」って何だ。って公式ドキュメントを読みながらした僕の理解はこんな感じ。 ＄emit（）でカスタムイベントを定義できると行っておきながら、何の処理もしていないじゃないかといったツッコミどころは多いですが、とりあえずの理解のために概念図を書いてみました。 パワポとか使ってもっと綺麗な図にできたら良かったのですが、そこまでの気力はありませんでした。 ソースコード カスタムイベントを作って遊ぶために使ったソースコードです。 親コンポーネント（App.vue）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<template> <div id="app"> <BaseCheckbox v-model="Checked" ></BaseCheckbox> <h1>{{Checked}}</h1> </div> </template> <script> import BaseCheckbox from "./components/BaseCheckbox"; export default { name: "app", props: { Checked: { type: Boolean, default: true } }, components: { BaseCheckbox, }, }; |
子コンポーネント（Checkbox.vue）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template> <div> <input type="checkbox" v-on:click="$emit('CheckboxChanged', $event.target.checked)" > <h1>{{checked}}</h1> </div> </template> |
$emitを使ってみて 処理自体はとても単純なのですが、定義しなければいけないプロパティ名、イベント名などが多く、親コンポーネントと子コンポーネントを行き来していると訳が分からなくなって、頭がこんがらがってしまうという印象でした。 これは何度も使って慣れるしかないかも
Vue.jsにQuasar Frameworkを入れてみる
はじめに Vue.jsの使い方の最低限の部分は分かったので、次は、CSSフレームワークを導入して、開発を始めてみようと思い、試しに Quasar Framework 入れてみました。 なぜQuasarを選んだかは、公式ページが一番カッコ良かったから、です。 導入方法 やり方は二つ quasar cliを入れる vue cliにプラグインとしてquasarを入れる。 元々、vue cliを入れていたので、既存のVueプロジェクトにQuasarをプラグインとして入れる方法を選択。 まずは、Vueプロジェクトを作成していきます。すでにVue.jsの環境が整っていれば、
|
1 |
vue create <Project Name> |
と打てば、<Project Name>プロジェクトが作成されます。 このプロジェクトに、プラグインとして、quasarを導入します。 vue cliで作成したプロジェクトのディレクトリ に移動し、vue addでQuasarを導入。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
>>> vue add quasar WARN There are uncommited changes in the current repository, it's recommended to commit or stash them first. ? Still proceed? Yes 📦 Installing vue-cli-plugin-quasar... + vue-cli-plugin-quasar@2.0.0 added 1 package from 1 contributor and audited 24552 packages in 6.762s found 0 vulnerabilities ✔ Successfully installed plugin: vue-cli-plugin-quasar ? Allow Quasar to replace App.vue, About.vue, Home.vue and (if available) router.js? Yes ? Pick a Quasar components & directives import strategy: (can be changed later) Auto import (k ebab-case) ? Pick your favorite CSS preprocessor: Sass ? Choose Quasar Icon Set Material ? Default Quasar language pack - one from https://github.com/quasarframework/quasar/tree/dev/u i/lang en-us ? Use RTL support? Yes ? Select features: (Press 🚀 Invoking generator for vue-cli-plugin-quasar... 📦 Installing additional dependencies... > node-sass@4.13.0 install /Users/kouki/Projects/vue-lesson/node_modules/node-sass > node scripts/install.js Downloading binary from https://github.com/sass/node-sass/releases/download/v4.13.0/darwin-x64-79_binding.node Download complete ░⸩ ⠋ : Binary saved to /Users/kouki/Projects/vue-lesson/node_modules/node-sass/vendor/darwin-x64-79/binding.node Caching binary to /Users/kouki/.npm/node-sass/4.13.0/darwin-x64-79_binding.node > core-js@2.6.11 postinstall /Users/kouki/Projects/vue-lesson/node_modules/babel-runtime/node_modules/core-js > node -e "try{require('./postinstall')}catch(e){}" > node-sass@4.13.0 postinstall /Users/kouki/Projects/vue-lesson/node_modules/node-sass > node scripts/build.js Binary found at /Users/kouki/Projects/vue-lesson/node_modules/node-sass/vendor/darwin-x64-79/binding.node Testing binary Binary is fine added 107 packages from 74 contributors and audited 25143 packages in 12.707s found 0 vulnerabilities ⚓ Running completion hooks... ✔ Successfully invoked generator for plugin: vue-cli-plugin-quasar The following files have been updated / added: .gitignore .postcssrc.js README.md babel.config.js package-lock.json package.json public/favicon.ico public/index.html src/App.vue src/assets/logo.png src/components/HelloWorld.vue src/main.js src/quasar.js src/styles/quasar.sass src/styles/quasar.variables.sass vue.config.js You should review these changes with git diff and commit them. INFO quasar Documentation can be found at: https://quasar.dev Quasar is relying on donations to evolve. We'd be very grateful if you can read our manifest on "Why donations are important": https://quasar.dev/why-donate Donation campaign: https://donate.quasar.dev Any amount is very welcomed. If invoices are required, please first contact razvan@quasar.dev Please give us a star on Github if you appreciate our work: https://github.com/quasarframework/quasar Enjoy! - Quasar Team |
実行する時のコマンドはvue cliと同じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
>>> npm run serve > vue-lesson@0.1.0 serve /Users/kouki/Projects/vue-lesson > vue-cli-service serve INFO Starting development server... 40% building 145/171 modules 26 active ...son/node_modules/core-js/modules/es.array.filter.jsYou did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js. 98% after emitting SizeLimitsPlugin DONE Compiled successfully in 12350ms 22:09:36 App running at: - Local: http://localhost:8080/ - Network: http://192.168.11.4:8080/ Note that the development build is not optimized. To create a production build, run npm run build. |
Vue.jsで快適な開発ライフを送りたい
VS Codeは、デフォルトで色々なショートカットキーがあったりして、特にプラグインなどを入れなくても、十分便利に使えるのですが、Udemyの講習やQiitaの記事ではプラグインが入っている前提で話が進んでいることが多いので、後から追加したプラグインや加えた設定を備忘録として残しておこうと思います。 コード整形 Vue.jsでは、HTMLタグに属性を追加して、動的な処理を加えていくのですが、何の設定もしないと、以下のようなHTMLタグが出来上がってしまいます。 このコードでは、属性が２つだけなので、何とか読めますが、これが３つ４つと増えてきたら読めた物ではありません。 タグが見切れる前に早く何とかしましょう。 参考にした記事はこちら↓ VSCodeでvueファイルのhtmlを自動フォーマットする方法 必要な情報だけが載っていてノーストレスで解決できました。 設定が終わったら、。.vueのコードを全選択して、Shift + option + Fで整形完了！ （WindowsならCtrl + Alt + F） これならソースコードが右側に見切れることはありませんね