6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Cloud9でlocalhostを使用しない方法まとめ(随時更新)

Last updated at Posted at 2018-05-31

はじめに

Cloud9でデフォルト設定のlocalhostを使用するとアプリの動作確認が出来ません。1

他にもデフォルト設定のlocalhostを使用する事で正常に起動しないものがあります。

それを解決する為の方法を記載します。

npm run dev

各パターンごとに方法を記載。基本的には記載された内容を実施した後npm run devを実行でOK。

##vue init webpack でテンプレートを作った場合

<ProjectName>/build/webpack.dev.conf.jsの一部分を下記の様に変更。

- const HOST = process.env.HOST
+ const HOST = '0.0.0.0'

/build/webpack.dev.conf.jsにdisableHostCheck: true,を追加。

const devWebpackConfig = merge(baseWebpackConfig, {
  .
  .
  .
  // these devServer options should be customized in /config/index.js
  devServer: {
+   disableHostCheck: true,
    clientLogLevel: 'warning',
    historyApiFallback: {

vue init nuxt/starter でテンプレートを作った場合

<ProjectName>/package.jsonの一部分を下記の様に変更。

"scripts": {
-    "dev": "nuxt",
+    "dev": "HOST=0.0.0.0 nuxt",

vue createでテンプレートを作った場合(Vue CLI 3)

プロジェクトのルートフォルダ直下にvue.config.jsを作成して、下記内容を登録。

module.exports = {
  devServer: {
    host: '0.0.0.0',
    disableHostCheck: true
  }
}

vue init pwa でテンプレートを作った場合

localhostでアプリが正常に起動した為、設定変更は不要。理由を調査する予定は無し。

Firebase

firebase login

firebase login --no-localhost

firebase serve

firebase serve -o $IP -p $PORT
  1. localhostはログイン中のPCの事であって、Cloud9上のマシンの事では無い為

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?