Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブreact

2018年9月7日 By KD コメントを書く

create-react-appで作ったアプリのService Workerを無効化する方法

create-react-appで作ったアプリのService Workerを無効化する方法

create-react-appはデフォルトでPWAのためのService Workerに対応しています。しかし、PWAを考慮しないで作っているアプリの場合、Service Workerが原因で思わぬ不具合に見舞われることがあります。今回は、明示的にService Worckerを無効化する方法を紹介します。

はじめに

昨年create-react-appにService Workerがマージされ、デフォルトになりました。PWA(Progressive Web Apps)にガッツリ対応するならそのままでよいですが、今まで通りに開発したい場合は、Service Workerを無効化しないとトラブルの元です。例えば、HerokuにService Workerを有効にしたままPushして、後でService Workerのスクリプトを削除してPushしたとしても、Heroku内のキャッシュによってService Workerが動き続ける問題が知られています。

そんな問題に悩まされないように、PWAに対応しないプロジェクト向けに、Service Worckerの無効化方法を紹介します。

Service Workerの無効化方法①スクリプトの削除

まずは最も一般的な方法です。最初からPWAに対応しない場合はこの方法を取ります。

「registerServiceWorker.js」を削除

create-react-appで自動生成された「registerServiceWorker.js」を削除します。

$ create-react-app my-app
$ cd my-app
$ ls src/
App.css                   App.test.js               index.js                  registerServiceWorker.js
App.js                    index.css                 logo.svg
$ rm src/registerServiceWorker.js
$ ls src/
App.css      App.js       App.test.js  index.css    index.js     logo.svg

index.jsからregisterServiceWorkerを削除

わかりやすくコメントアウトします。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
// registerServiceWorker();

これで、Service Workerが無効化されました。

Service Workerの無効化方法②明示的に無効化

次に、明示的に指定する方法です。これは、途中までService Workerを有効なまま開発をしており、途中からPWAに対応しない方針を決めた時などに、キャッシュの影響を受けないように無効化する方法です。

index.jsでunregisterを呼び出す

unregisterを呼び出すように書き直します。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { unregister } from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
unregister();

これで、Service Workerが明示的に無効化されました。

最後に

いかがでしたか?create-react-appを使う際に、PWAを導入しないのであれば、必ずService Workerは無効化しておきましょう。では。

環境

  • create-react-app: 1.5.2

カテゴリ : 技術 Tips & Tutorials タグ : create-react-app, react, service-worker

2018年8月27日 By KD コメントを書く

React Styled Componentsを試してみよう

React Styled Componentsを試してみよう

Reactを中心とするコンポーネントベースのWebアプリケーション開発は、CSSをモジュール化しようとする動きにも影響を与えています。今回はReactのStyled Componentsを簡単に試してみましょう。(2019/2/1にアップデートしました)

はじめに

CSSのモジュール化の流れは自然な発想です。そもそもCSSはグローバルスコープであるため、あるCSSファイルに書いた内容は全てのCSSファイルに影響を及ぼします。誰かが書いたCSSを見てどれがどこに影響を及ぼしているかの全容を把握するのはそもそも難しいのです。そこで近年、SASS等のCSSフレームワークやBEM等の命名規約を用いることでローカルスコープっぽく扱おうとするモジュール化の動きが盛んになりました。そして最近ではCSS Modulesがよく使われるようになってきました。Webpackのcss-loaderのmoduleオプションを有効にすることで、CSSのクラス名を一意に変換し、あるReactコンポーネント用のCSSファイルが他のCSSファイルに影響を及ぼすことを回避できるようになりました。そして、次のパラダイムとして、CSSを完全にコンポーネントに閉じ込めることでJavascriptの力を引き出す方法がCSS in JSであり、Reactでそれを実現したのがStyled Componentsです。

今回はcreate-react-appで作成したアプリケーションを元に、まずはCSS Modulesを適用し、その後でStyled Componentsを適用して違いを見ていきましょう。

CSS Modulesの適用

まずはCSS Modulesを使ってcreate-react-appで自動生成されたサンプルアプリケーションを書き直してみましょう。

準備

それではcreate-react-appでサンプルアプリケーションを作り、CSS Modulesを有効化しましょう。

$ create-react-app my-css-modules-app
$ cd my-css-modules-app
$ yarn eject
$ yarn install
$ vi config/webpack.config.dev.js
...
              {
                loader: require.resolve('css-loader'),
                options: {
                  modules: true, // 追加
                  importLoaders: 1,
                  localIndentName: '[name]__[local]__[hash:base64:5]' // 追加
                },
              },
...

index.js

index.cssの内容をCSS Modulesで書き直します。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import styles from './index.css';

ReactDOM.render(<App className={styles} />, document.getElementById('root'));
registerServiceWorker();

App.js

CSS Modulesで書き直しましょう。

import React, { Component } from 'react';
import logo from './logo.svg';

import styles from './App.css';

class App extends Component {
  render() {
    return (
      <div className={styles.App}>
        <header className={styles['App-header']}>
          <img src={logo} className={styles['App-logo']} alt="logo" />
          <h1 className={styles['App-title']}>Welcome to React</h1>
        </header>
        <p className={styles['App-intro']}>
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

動作確認

元のスタイルが反映されていることを確認しましょう、

$ yarn start

Css modules

OKですね。CSSのクラス名に一意の値が自動的に設定されています。

Styled Componentsの適用

それでは、いよいよStyled Componentsを使ってcreate-react-appで自動生成されたサンプルアプリケーションを書き直してみましょう。

準備

create-react-appでサンプルアプリケーションを作り、必要なパッケージをインストールしましょう。

$ create-react-app my-styled-components-app
$ cd my-styled-components-app
$ yarn add styled-components

index.js(old)

index.cssの内容をinjectGlobalを使って書き直します。

import React from 'react';
import ReactDOM from 'react-dom';
import { injectGlobal } from 'styled-components';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

injectGlobal`
  body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
`;

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

App.js(old)

Styled Componentsを使って書き直しましょう。

import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import logo from './logo.svg';

const AppWrapper = styled.div`
  text-align: center;
`;

const AppHeader = styled.header`
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
`;

const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const AppLogo = styled.img.attrs({
  src: logo,
  alt: 'logo',
})`
  animation: ${rotate360} infinite 20s linear;
  height: 80px;
`;

const AppTitle = styled.h1`
  font-size: 1.5em;
`;

const AppIntro = styled.p`
  font-size: large;
`;

class App extends Component {
  render() {
    return (
      <AppWrapper>
        <AppHeader>
          <AppLogo />
          <AppTitle>Welcome to React</AppTitle>
        </AppHeader>
        <AppIntro>
          To get started, edit <code>src/App.js</code> and save to reload.
        </AppIntro>
      </AppWrapper>
    );
  }
}

export default App;

index.js(new)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

App.js(new)

Styled Componentsを使って書き直しましょう。index.cssの内容はcreateGlobalStyleを使って書き直します。

import React, { Component } from 'react';
import styled, { createGlobalStyle, keyframes } from 'styled-components';
import logo from './logo.svg';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }
`;

const AppWrapper = styled.div`
  text-align: center;
`;

const AppHeader = styled.header`
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
`;

const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const AppLogo = styled.img.attrs({
  src: logo,
  alt: 'logo',
})`
  animation: ${rotate360} infinite 20s linear;
  height: 80px;
`;

const AppTitle = styled.h1`
  font-size: 1.5em;
`;

const AppIntro = styled.p`
  font-size: large;
`;

class App extends Component {
  render() {
    return (
      <>
        <AppWrapper>
          <AppHeader>
            <AppLogo />
            <AppTitle>Welcome to React</AppTitle>
          </AppHeader>
          <AppIntro>
            To get started, edit <code>src/App.js</code> and save to reload.
          </AppIntro>
        </AppWrapper>
        <GlobalStyle />
      </>
    );
  }
}

export default App;

動作確認

CSSファイルを削除しても元のスタイルが反映されていることを確認しましょう、

$ rm src/index.css
$ rm src/App.css
$ yarn start

Styled

表示もアニメーションもOKです。CSSのクラス名には一意の値が自動的に設定され、スタイルが正しく適用されています。

最後に

いかがでしたか?Styled Componentsをざっくりではありますが、理解できたのではないでしょうか。新しいプロジェクトでは積極的に使っていきましょう。では。

環境

  • create-react-app: 1.5.2
  • yarn: 1.9.4 -> 1.13.0
  • styled-components: 3.4.5 -> 4.1.3

カテゴリ : 技術 Tips & Tutorials タグ : css, css-modules, react, react-styled-components

2018年4月27日 By KD コメントを書く

初級JavascriptフルスタックエンジニアのためのReactとExpressの同時開発チュートリアル(Dockerコンテナ化してHerokuにデプロイ編)

初級JavascriptフルスタックエンジニアのためのReactとExpressの同時開発チュートリアル(Dockerコンテナ化してHerokuにデプロイ編)

最近のアプリケーションはDocker上で稼働させるのが当たり前になりつつあります。そして、HerokuのようなPaaS環境にアプリケーションをリリースすることも小規模サービスでは一般的になっています。今回は、人気のHeroku上に人気のDockerコンテナをデプロイする方法をご紹介します。

Herokuとは?

Herokuとは、AmazonのAWSやMicrosoftのAzureと言ったIaaS上にアプリケーションを簡単にデプロイすることができるPaaSです。一回デプロイしてみると、そのデプロイの簡単さに驚くばかりです。

今回は、前回の「JavascriptフルスタックエンジニアのためのReactとExpressの同時開発チュートリアル(基本的なアプリ作成と同時開発環境構築編)」に引き続き、サンプルアプリケーションをDocker化し、Herokuにデプロイしていきましょう。

環境準備

Heroku CLIのインストール

$ brew install heroku
$ heroku --version
heroku-cli/6.15.30-e7b41cd (darwin-x64) node-v9.7.1

デプロイするアプリケーション

今回は前回作成した簡単なアプリケーションを使います。なので、サンプルアプリケーションで試したい人は、前回の記事からプロジェクトを持ってきて下さい。

初級JavascriptフルスタックエンジニアのためのReactとExpressの同時開発チュートリアル(基本的なアプリ作成と同時開発環境構築編)

Herokuにデプロイする時はGitを使うので、前回のプロジェクトをひとまずコミットしましょう。

$ cd full-stack-app/
$ git init
$ git add .
$ git commit -m 'initial commit'

Herokuの登録

まずはHerokuアカウントを作ってログインしましょう。

Herokuアカウントの作成

Herokuのサイトに言ってアカウントを作成して下さい。この時にクレジットカード情報の登録を行って下さい。なぜその必要があるかと言うと、後で使うHerokuのアドオンの使用条件になっているからです。クレジットカードの登録をしただけで課金されることは無いので安心して下さい。今回は無料枠だけでやります。

ログインとキー登録

環境準備でインストールしたHeroku CLIを使ってHerokuにコマンドラインからログインします。その後、キーを生成して登録します。

$ heroku login
Enter your Heroku credentials:
Email: your@email.com
Password: ***************
Logged in as your@email.com
$ heroku keys:add
Could not find an existing SSH key at ~/.ssh/id_rsa.pub
? Would you like to generate a new one? Yes
Generating public/private rsa key pair.
...
Uploading /Users/you/.ssh/id_rsa.pub SSH key... done

Herokuにデプロイする(通常のアプリケーション編)

それではDockerで、と言いたいところですが、まずは通常のHeroku上にデプロイする方法をやってみましょう。

package.jsonにスクリプトを追加する(NPM編)

まずはpackage.jsonにHerokuにビルドしてもらうためのスクリプトを追加します。このスクリプトにより、HerokuにPushするだけでReactがビルドされます。

  "scripts": {
    ...
    "heroku-postbuild":
      "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  }

package.jsonにスクリプトを追加する(Yarn編)

Yarnの場合のスクリプトはこうなります。

  "scripts": {
    ...
    "heroku-postbuild":
      "NPM_CONFIG_PRODUCTION=false yarn --cwd client install && yarn --cwd client build"
  }

Mongooseの設定を変更する

「server.js」のMongooseの設定部分を以下のように書き換えます。

mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost:27018/sampledb');

すぐに分かりますが「MONGODB_URI」はHerokuが自動設定してくれるMongoDBの接続先の環境変数です。

Herokuにデプロイする

後は非常に簡単です。以下のようにコミットして、Herokuコマンドを実行するだけです。Herokuのアドオンを指定している「heroku addons:create mongolab:sandbox」では、mLabのSandbox(無料枠)にデータベースを作って自動で連携します。

$ cd full-stack-app/
$ git add .
$ git commit -m 'change to deploy to Heroku'
$ git push origin master #GitHubなどを使っている場合
$ heroku create
$ heroku addons:create mongolab:sandbox
Creating mongolab:sandbox on ⬢ xxxx-xxxx... free
Welcome to mLab.  Your new subscription is being created and will be available shortly.  Please consult the mLab Add-on Admin UI to check on its progress.
Created mongolab-xxxx-xxxx as MONGODB_URI
Use heroku addons:docs mongolab to view documentation
$ heroku config
MONGODB_URI: mongodb://heroku_xxxx:xxxx@xxxx.mlab.com:xxxx/heroku_xxxx
$ git push heroku master
$ heroku open

「heroku open」を実行してブラウザでうまく表示されない場合はログを確認しましょう。

$ heroku logs

よくあるのは環境変数の設定漏れや誤り、それに伴うデータベースとの接続失敗なので、確認してみて下さい。

アプリケーションをDockerコンテナ化する

ここからが本番です。HerokuにDockerコンテナをデプロイするためにはまずサンプルアプリケーションをDockerコンテナ上で起動するようにする必要があります。それではやっていきましょう。

必要なファイルの作成

まずはプロジェクト直下に「Dockerfile」と「docker-compose.yml」を作成します。

$ cd full-stack-app/
$ touch Dockerfile
$ touch docker-compose.yml
$ touch .dockerignore
$ touch .env

Dockerfileの作成(NPM編)

FROM node:9.7.1-alpine

RUN mkdir /app
WORKDIR /app

RUN npm install -g nodemon

COPY package.json package.json
COPY package-lock.json package-lock.json
RUN npm install && mv node_modules /node_modules

COPY . .

LABEL maintainer="You <your@email.com>"

CMD node server/server.js

Dockerfileの作成(Yarn編)

FROM node:9.7.1-alpine

RUN mkdir /app
WORKDIR /app

RUN npm install -g yarn nodemon

COPY package.json package.json
COPY yarn.lock yarn.lock
RUN yarn install && mv node_modules /node_modules

COPY . .

LABEL maintainer="You "

CMD node server/server.js

docker-compose.ymlの作成

「docker-compose.yml」は以下のようになります。

version: '3'

services:
  web:
    build: .
    ports:
      - '3001:3001'
    command: node server/server.js
    env_file:
      - .env
    depends_on:
      - 'db'
  db:
    image: mongo:latest
    ports:
      - '27018:27017'

今回はテスト用なので簡素にしてありますが、開発で使いたい場合はデータを共有したり保存したりするために「volumes」を設定すると良いでしょう。

.dockerignoreの作成

「.dockerignore」は以下のようになります。

.dockerignore
.git
node_modules
client/*
!client/build
db/

DockerコンテナにはReactをビルドしたファイルのみがあればよいのと、ローカルに保存してあるデータベースのデータも不要なので除外します。

.envの作成

ローカルでwebコンテナとdbコンテナを接続するために「MONGODB_URI」を設定します。

MONGODB_URI=mongodb://db:27017/sampledb

ローカルでビルドしてコンテナを起動する(NPM編)

$ npm run build --prefix client
$ docker-compose up -d

ローカルでビルドしてコンテナを起動する(Yarn編)

$ yarn --cwd client build
$ docker-compose up -d

以上で、サンプルアプリケーションのDocker化が完了しました。

Herokuにデプロイする(Dockerコンテナ編)

やっとここまできました。Docker化したサンプルアプリケーションをHerokuにデプロイしましょう。

環境変数の調整

「.env」ファイルの設定をコメントアウトします。「MONGODB_URI」の設定としてHerokuに設定されている環境変数を利用するためです。

# MONGODB_URI=mongodb://db:27017/sampledb

そして、Herokuの環境変数に「NODE_ENV」を設定します。

$ heroku config:set NODE_ENV=production
$ heroku config
=== xxxx-xxxx-xxxx Config Vars
MONGODB_URI: mongodb://heroku_xxxx:xxxx@xxxx.mlab.com:xxxx/heroku_xxxx
NODE_ENV:    production

これは、HerokuのNodeJS環境ではデフォルトで「NODE_ENV=production」と設定されていますが、Container Registryでは設定されていないためです。

Herokuにデプロイする(Herokuコマンド編)

それではHerokuにDockerコンテナをデプロイしましょう。「heroku container」コマンドで以下のようにするだけです。

$ cd full-stack-app/
$ npm run build --prefix client
$ heroku container:login
Login Succeeded
$ heroku container:push web
=== Building web (/Users/you/full-stack-app/Dockerfile)
Sending build context to Docker daemon   3.75MB
...
Successfully built 244a09e60313
Successfully tagged registry.heroku.com/xxxx-xxxx/web:latest
=== Pushing web (/Users/you/full-stack-app/Dockerfile)
The push refers to repository [registry.heroku.com/xxxx-xxxx-xxxx/web]
8ae4845af426: Pushed
...
$ heroku open

素晴らしい!簡単にできましたね。ローカルで自動的にDockerイメージが作成され、Herokuコンテナ環境にPushされているのが分かります。

Herokuにデプロイする(Dockerコマンド編)

Herokuコマンドを使ってやるのも良いのですが、Dockerイメージに好きな名前とバージョンを付けて自分でコントロールしたい場合は、dockerコマンドを使うと良いです。やってみましょう。

$ cd full-stack-app/
$ yarn --cwd client build
$ heroku container:login
$ docker-compose build --no-cache web
$ docker images
$ docker tag 0f4d3762ac35 registry.heroku.com/your-app-xxxxx/web:1.0.0
$ docker push registry.heroku.com/your-app-xxxxx/web:1.0.0
The push refers to repository [registry.heroku.com/your-app-xxxxx/web]
$ heroku open -a your-app-xxxxx

「your-app-xxxxx」には「heroku create」コマンド実行時にHerokuが自動で払い出したアプリ名を使用します。「heroku open」の時にブラウザに表示されるドメイン名ですね。

これで好きな名前やバージョンを付けたDockerイメージもHerokuにデプロイすることができました。

追記(container:release対応)

Container RegistryにDockerイメージをPushした後に、Releaseコマンドが必要になりました。詳しくは以下の記事を参照して下さい。

Heroku Container Registryのcontainer:push後のcontainer:releaseの対応方法

おまけ

dockerコマンドによるHerokuコンテナ環境へのログイン方法

Herokuコンテナ環境にログインするには「heroku container:login」コマンドを使ってましたが、dockerコマンドでもログインできます。

$ docker login --username=_ --password=$(heroku auth:token) registry.heroku.com
...
Login Succeeded

Herokuコンテナ環境でdocker-compose.ymlで必要なもの

今回作成した「docker-compose.yml」はローカル起動のためにPort設定やデータベース設定を記載しましたが、Herokuコンテナ環境ではPortは自動設定されますし、今回はデータベースはmLabを使用しているので設定は不要です。

そいういった贅肉を落とすと、結局以下の設定さえあればOKです。

version: '3'

services:
  web:
    build: .
    command: node server/server.js
    env_file:
      - .env

Dockerコマンドでイメージ名を後で変更しなくて良いように「image」を設定しても良いでしょう。

最後に

いかがでしたか?これでHerokuにDockerコンテナをデプロイする方法をマスターできたと思います。Herokuの独特の癖がありますが、それでもこのお手軽さは素晴らしいですね。それでは。

環境

  • PC : macOS High Sierra 10.13.3
  • heroku : heroku-cli/6.15.30-e7b41cd (darwin-x64) node-v9.7.1
  • docker : Docker version 17.12.0-ce, build c97c6d6

カテゴリ : 技術 Tips & Tutorials タグ : docker, express, heroku, react

  • « 前のページ
  • 1
  • 2
  • 3
  • 4
  • 次のページ »

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • TumblrからWordPressにブログ移転する最適な方法
    TumblrからWordPressにブログ移転する最適な方法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • DockerコンテナのThe PID 1 Problemとその解決策(NodeJS編)
    DockerコンテナのThe PID 1 Problemとその解決策(NodeJS編)

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes