パブリックアドレスからアクセス可能なローカルサーバーを作成する

私は10年の大部分の間ウェブサイトを開発していました、そして、私の最大の問題の1つは常にローカル開発とライブテストにローカルサイトを同期させることでした。ローカル環境を使用するのは速いからですが、遠くから見ることはできません。どこかに転送すると、データベース操作、テーブル名の変更、値などが発生します。.

この記事では、簡単な方法を紹介します。 ローカルサーバーを実行する あなたができる 携帯電話や他の携帯端末からのアクセス ネイティブに、そしてまたインターネットを介してブロードキャストします。これはあなたの作品をクライアントと共有することを意味します。.

Vagrantを使用してローカル環境を構築する

少し前に、Vagrantの使い方についてHongkiatに記事を書いたので、ここでは基本的なことだけを説明します。詳細については、記事を見てください!

始めるには、VirtualBoxとVagrantを入手してインストールする必要があります。どちらも無料で、サーバーを実行する仮想マシンを作成するために使用されます。.

それでは、Webサイトを保存するフォルダを作成しましょう。名前の付いたディレクトリを使用しましょう。 “ウェブサイト” メインユーザーディレクトリ内それだろう / Users / [ユーザー名] /ウェブサイト OS Xでは C：/ユーザー/ [ユーザー名] /ウェブサイト Windowsの場合.

という名前の新しいフォルダを作成します。 ワードプレス. これが仮想マシンを作成する場所です。アイデアは、各フォルダが ウェブサイト 別の仮想マシンを収容します。あなたがいる間 できる 1つの仮想マシンにできるだけ多くのWebサイトを配置します。プラットフォームごとにグループ化します（例：WordPress、Laravel、Custom）。

このチュートリアルの目的のために、私はWordPress Webサイトを作成します。.

の中 ワードプレス 2つのファイルを作成する必要があるフォルダ, Vagrantfile そして install.sh. これらは私たちの仮想マシンを設定するために使われます。 Jeffrey Wayは2つのすばらしいスターターファイルを作成しました。あなたは彼のVagrantfileとinstall.shファイルをつかむことができます.

次に、ターミナルを使用して、 ワードプレス ディレクトリと種類 気高く. ボックスをダウンロードしてからインストールする必要があるため、これにはしばらく時間がかかります。あなたが待っている間一杯のコーヒーをつかみ、50のWordPressのヒントにこの記事をチェックしてください.

プロセスが完了したらあなたはに行くことができるはずです 192.168.33.21 そして適切に提供されたページを見てください。あなたのコンテンツフォルダはWordPressディレクトリ内のhtmlフォルダであるべきです。これで、ファイルの追加を開始したり、WordPressをインストールしたりすることができます。.

仮想ホストの作成、ドメインのマッピングなどの詳細については、Vagrantの完全ガイドを読むことを忘れないでください。 mytest.dev 等々.

Gulpを使って同じネットワーク上のローカルサイトを開く

サイトを構築している間、あなたは即応性について考えるべきです。小さなウィンドウはブラウザウィンドウを狭くすることである程度エミュレートすることができますが、特に網膜スクリーンを混在させて投げかけた場合は、まったく同じ体験にはなりません。.

理想的には、あなたはあなたのモバイル機器であなたのローカルウェブサイトを開きたいでしょう。デバイスが同じネットワーク上にあれば、これはそれほど難しくありません。.

これを実現するためにGulpとBrowsersyncを使います。 Gulpは開発を自動化するためのツールで、Browsersyncはローカルサーバーを作成するだけでなく、スクロール、クリック、フォームなどをデバイス間で同期させることができる優れたツールです。.

Gulpのインストール

Gulpのインストールはとても簡単です。手順については、はじめにページに進んでください。前提条件の1つはNPM（Node Package Manager）です。これを実現する最も簡単な方法は、Node自体をインストールすることです。手順については、Node Webサイトに進んでください。.

使用したら npm install --global gulp グローバルにgulpをインストールするためのコマンドは、あなたのプロジェクトに追加する必要があります。これを行う方法は実行することです npm install --save-dev gulp プロジェクトのルートフォルダに gulpfile.js そこにファイル.

現時点では、そのファイル内にGulp自体を使用することを示す1行のコードを追加しましょう。.

var gulp = require（ 'gulp'）;

スクリプトの連結、SassとLESSのコンパイル、画像の最適化など、Gulpができるすごいことすべてに興味があるなら、Guide To Gulpを読んでください。この記事では、サーバーの作成に焦点を当てます。.

Browsersyncを使う

Browsersyncには、2段階でインストールできるGulp拡張機能があります。まず、npmを使ってそれをダウンロードし、それをGulpfileに追加しましょう。.

を発行 npm install browser-sync gulp --save-dev ターミナルのプロジェクトルートでcommand。これで拡張子がダウンロードされます。次に、Gulpfileを開き、それに次の行を追加します。

var browserSync = require（ 'browser-sync'）。create（）;

これにより、Gulpは、私たちがBrowsersyncを使用することになります。次に、Browsersyncの動作方法を制御するタスクを定義します。.

gulp.task（ 'browser-sync'、function（）browserSync.init（proxy： "192.168.33.21"）;）;

追加したら、入力できます ブラウザ同期 端末を起動してサーバーを起動します。下の画像のようなものが見えるはずです.

そこに4つの別々のURLがあります、ここにそれらが意味するものです：

• 地元注：ローカルURLは、実行しているマシン上のサーバーにアクセスできる場所です。私たちの場合はあなたが使用することができます 192.168.33.21 あるいはBorwsersyncが提供するものを使うことができます。.
• 外部：これは、Webサイトにアクセスするためにネットワークに接続されている任意のデバイスで使用できるURLです。それはあなたのローカルマシン、あなたの携帯電話、タブレットなどで動作します.
• UI：このURLは現在実行中のサーバーのオプションを指しています。接続を確認したり、ネットワークスロットルを設定したり、履歴を表示したり、同期オプションを表示したりできます。.
• 外部UI：これはUIと同じですが、ネットワーク上のどのデバイスからもアクセス可能です.

なぜBrowsersyncを使うのか?

私たちはこの段階を終えたので、あなたは考えているかもしれません：なぜBrowsersyncをまったく使わないのですか？ URL 192.168.33.21は、どのデバイスからもアクセスできます。これはそうですが、あなたはこのURLにWordPressをインストールする必要があるでしょう.

私は通常仮想ホストを使い、wordpress.localやmyproject.devのようなドメインを持っています。これらはローカルに解決されるので、あなたはあなたの携帯電話でwordpress.localにアクセスすることができず、あなたのローカルコンピュータと同じ結果を見ることができません。.

これまでのところ、ネットワーク上のどのデバイスからもアクセスできるテストサイトがあります。今度はグローバルに行き、私達の仕事をインターネットで放送する時が来ました.

ngrokを使ってローカルホストを共有する

ngrokはあなたのローカルホストへの安全なトンネルを作るのに使えるツールです。 （まだ無料の）サインアップすると、パスワードで保護されたトンネル、TCP、および複数の同時トンネルが発生します。.

ngrokのインストール

ngrokのダウンロードページに行き、必要なバージョンを入手してください。あなたはそれが入っているフォルダーからそれを実行するか、あなたがどこからでもそれを実行することを可能にする場所にそれを動かすことができます。 Mac / Linuxでは、次のコマンドを実行できます。

sudo mv ngrok / usr / local / bin / ngrok

この場所が存在しないというエラーが表示された場合は、足りないフォルダを作成してください。.

ngrokを使う

ありがたいことに、この部分は非常に単純です。 Gulp経由でサーバーを稼働させたら、それが使用しているポートを見てください。上記の例では、ローカルサーバーは http：// localhost：3000 これは、ポート3000を使用していることを意味します。新しい端末タブで、次のコマンドを実行します。

ngrok http 3000

これはあなたのlocalhostへのアクセス可能なトンネルを作成するでしょう、結果はこのようなものになるでしょう：

横に表示されているURL “転送” どこからでもあなたのウェブサイトにアクセスするためにあなたが使うことができるものです.

結論

一日の終わりに、3つのことができるようになりました。

• 私たちのプロジェクトを現地で見て作業する
• ネットワーク上の任意のデバイスを介して当社のウェブサイトを見る
• 他の人に簡単なリンクでどこでも私たちの作品を見させる

これにより、ローカルサーバーとテストサーバーを同期させたり、データベースを移行したり、その他の面倒なタスクを実行したりするのではなく、開発に集中することができます。.

ローカルで作業して結果を共有する方法が異なる場合は、お知らせください。!