CentOS 7にMySQLをインストールする

はじめに 初期設定のパスワードがランダムであるところ # 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 とやったあとの初期設定でハマったので備忘録。 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) 以下のコマンドで、一旦MySQLを止めましょう。 [vagrant@localhost ~]$ service mysqld stop Redirecting to /bin/systemctl stop mysqld.service ==== AUTHENTICATING FOR org.freedesktop.systemd1.manage-units…

DevOpsプロジェクトの作成

新規DevOpsプロジェクトの作成 Azure DevOpsプロジェクトの作成自体は簡単なのですが、権限周りで少し詰まったので、記録を残しておきます。 既にリソースグループが作成されているものとする 権限の設定 DevOps自体は、Azure Portal上にあるリソースグループの外側にあるため、権限の設定などは個別にする必要があります。 ユーザーごとの権限の設定 ユーザーごとの権限の設定は、サブスクリプションの所有者からしかできないため、この設定を最初に行います。 赤線部のOrganization Settingsから権限の設定画面へと移ります。 Usersのタブから、ユーザーごとに権限を設定することができます。 Access Levelについての公式ドキュメントはこちら リソースグループとDevOpsプロジェクトの接続 プロジェクト全体の設定は以下の赤線のタブから設定画面に移ることができます。 Azure PipelinesはAzure Repositoryのソースコードを直接WebAppsなどにデプロイする機能なのですが、そのままでは、DevOpsが単体で存在しているだけなので、最初にService Connectionsを追加します。 New Service Connectionボタンをクリックすると、以下のような画面が表示されます。 今回、必要なリソースは全て同じリソースグループにまとまっているため、「Azure Resource Manager」を選択します。 お勧めされているのでautomaticを選択 DevOpsを作成したアカウントが持っているサブスクリプション、権限を持っているリソースグループがドロップダウンに表示されます。 Saveすると、リソースグループへのService Connectionが新しく作成されます。

Djangoでmigrationのやり直しが上手くいかない

Djangoのmigrationをやり直したくなったけれど、色々試したら、 python manage.py migrate で psycopg2.errors.UndefinedColumn: column "<field名>" does not existといったエラーが出て、後戻りできなくなったりする。 僕みたいによく分かってない人は、一度全部消してからやり直したほうが絶対早い。 djangoでmigrateができない 下のコマンドは、同じSchemaのテーブルを全削除するコマンド。 drop schema public cascade; create schema public; これを実行してからマイグレーションすれば確実。

you cannot alter to or from M2M fields, or add or remove through= on M2M fields

python manage.py migrate で、 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をかけて解決した。

Djangoで新規にモデルを作成したのにmigration時に「No changes detected」となった時の対処法

Djangoプロジェクトを作成し、新しくモデルを作成して、migrationを書けた時に、「No changes detected」と表示されてしまう。 モデルを変えたのになぜ???と思ってググルと python manage.py makemigrations <project名> とmigrationするときに、プロジェクト名を指定しないといけないらしい。 python manage.py makemigrationsだけでも、上手くいっている人も、いるため、謎は深まるが、変更が反映されないときは、プロジェクト名を指定してあげると確実 >>> python manage.py makemigrations No changes detected >>> python manage.py makemigrations project Migrations for 'project': project/migrations/0001_initial.py – Create model Person – Create model Team manage.py └── project ├── __init__.py ├── __pycache__ │   ├── __init__.cpython-37.pyc │   ├── models.cpython-37.pyc │   ├── settings.cpython-37.pyc │   ├── urls.cpython-37.pyc…

‘npm run serve’ができない〜nodeのバージョン管理〜

普段、何も考えずに〇〇 updateと打ち込んでしまっているため、その戒めとしての備忘録 ちゃんとバージョン管理ソフトは使いましょう。。。 今回ハマったエラーはこちら 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)…

Vue Routerを使ってみる

今日は、Vue cliを使って、お手軽にVueのRouting機能を試していきます。 参考:Getting Started(公式) 公式ドキュメントではVue cliを使った解説はされていないので、この記事では、Vue cliを使いながらRouting機能を試していきたいと思います。 vue create <project name> cd <project name> npm install vue-router で準備を整えたら、必要な設定をしていきます。 └── src ├── App.vue ⭐️ ├── assets │   └── logo.png ├── components │   └── HelloWorld.vue ├── main.js⭐️ ├── router.js⭕️ └── views ├── Bar.vue⭕️ └── Foo.vue⭕️ コードを書く必要があるのは、星マークのファイル、⭕️は新しらないといけないファイル。 route.js このファイルで、コンポーネントとURLのマッピングを行っていきます。コードはこんな感じ import Vue from 'vue'; import Router from 'vue-router'; //…

子コンポーネントから親コンポーネントへのデータの受け渡し〜$emitを使って〜

Vueでは、コンポーネント間の関係はした図のように、ツリー状になっており、上から下へのデータの受け渡しは、propを使って行っていました。 ツリーの下から上にデータを渡すときは、少し大変なようで、親コンポーネントが子コンポーネントのイベントを購読することによって実現するようです。「購読」って何だ。って公式ドキュメントを読みながらした僕の理解はこんな感じ。 $emit()でカスタムイベントを定義できると行っておきながら、何の処理もしていないじゃないかといったツッコミどころは多いですが、とりあえずの理解のために概念図を書いてみました。 パワポとか使ってもっと綺麗な図にできたら良かったのですが、そこまでの気力はありませんでした。 ソースコード カスタムイベントを作って遊ぶために使ったソースコードです。 親コンポーネント(App.vue) <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) <template> <div> <input type="checkbox" v-on:click="$emit('CheckboxChanged', $event.target.checked)" > <h1>{{checked}}</h1> </div> </template> <script> export default…

子コンポーネントから親コンポーネントへ〜$emitを使って〜

子要素から親要素へのデータの受け渡し 公式では、データの受け渡しではなく、「子コンポーネントのイベントを購読する」と行っています。要するに、親コンポーネントから子コンポーネントのイベントを発火させるという意味です。 子コンポーネントから親コンポーネントにデータを受けわたすということは、実際のところ不可能であるため、親コンポーネントから、子コンポーネントのイベントを発火させることで、擬似的にこれらの処理を実現することになります。 $emit 使うのは$emitというメソッドです。 <div id="components-demo"> <h1>{{ number }}</h1> <sample-button :totalNumber="number" v-on:my-click="number += $event" > </sample-button> </div> Vue.component('sample-button', { props: { totalNumber: { Type: Number, } }, methods: { increment(){ this.$emit("my-click", this.totalNumber += 1); } }, template: '<button v-on:click="increment()">+1</button>' }) new Vue({ el: '#components-demo', data(){ return { number: 10 }; }, })

Vue.jsにQuasar Frameworkを入れてみる

はじめに Vue.jsの使い方の最低限の部分は分かったので、次は、CSSフレームワークを導入して、開発を始めてみようと思い、試しに Quasar Framework 入れてみました。 なぜQuasarを選んだかは、公式ページが一番カッコ良かったから、です。 導入方法 やり方は二つ quasar cliを入れる vue cliにプラグインとしてquasarを入れる。 元々、vue cliを入れていたので、既存のVueプロジェクトにQuasarをプラグインとして入れる方法を選択。 まずは、Vueプロジェクトを作成していきます。すでにVue.jsの環境が整っていれば、 vue create <Project Name> と打てば、<Project Name>プロジェクトが作成されます。 このプロジェクトに、プラグインとして、quasarを導入します。 vue cliで作成したプロジェクトのディレクトリ に移動し、vue addでQuasarを導入。 >>> 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… +…