HarioNote

<p>EclipseではなくVSCodeで作業しつつTomcatサーバーを立ち上げたく、設定してみたのですがそのうち忘れそうなので備忘録として書きます。</p>
<h2>前提・注意点</h2>
<p>私の場合以下の環境であったり前提条件のもとで設定しているので、参考にされる場合は自身の環境や状況によしなに合わせてください。</p>
<ul>
<li>作業PCにTomcatがインストールされている。</li>
<li>Tomcatのwebapps下にプロジェクトフォルダが配置されている</li>
<li>タイトルにVSCodeとあるが、私の使用しているエディタはVSCodeをフォークしたCursolというものなので若干見た目が異なるかもしれない。</li>
<li>今回スクショで出てくるTomcatのバージョンが古いです。実際にサービスとして外部に提供する場合はサポートされているバージョンを使用するようにしてください。</li>
</ul>
<h2>設定手順</h2>
<h3>必要な拡張を追加する</h3>
<p>まずVSCodeに必要なプラグインを追加しておきます。<br>
必要なので以下の2つです。</p>
<p>1.<a href="https://github.com/Microsoft/vscode-java-pack"> Extension Pack for Java</a><br>
<img src="https://storage.googleapis.com/newt-files/07084b3e-005f-4697-9860-6c413ae7958d/2024-12-16_2.webp" alt="2024-12-16_2.webp"><br>
2. <a href="https://github.com/redhat-developer/rsp-server-community">Community Server Connectors</a><br>
<img src="https://storage.googleapis.com/newt-files/a97b9f64-f8a0-4417-a909-0c4fad98b45c/2024-12-16_1.webp" alt="2024-12-16_1.webp"></p>
<h3>サーバーを設定する</h3>
<p>VSCodeの左ペインに<code>SERVERS</code>という欄が現れていると思うので、そこで「Create New Server...」をします。<br>
そして「No, use server on disk」を選択します。<br>
<img src="https://storage.googleapis.com/newt-files/4b143ba1-f1ea-4ffa-bf80-567644ecd1d1/2024-12-16_3.webp" alt="2024-12-16_3.webp"><br>
<img src="https://storage.googleapis.com/newt-files/5ef8ea35-a29f-42d6-8bfe-acb46c8cc507/2024-12-16_4.webp" alt="2024-12-16_4.webp"><br>
<img src="https://storage.googleapis.com/newt-files/616ffdeb-2c8d-4adb-8738-025c9a00d228/2024-12-16_5.webp" alt="2024-12-16_5.webp"></p>
<p>フォルダ選択ダイアログが表示されるので、Tomcatサーバーがあるディレクトリを選択します。（binがあるところです）<br>
<img src="https://storage.googleapis.com/newt-files/d465c48c-cf27-4bde-9612-e5362b89c43a/2024-12-16_6.webp" alt="2024-12-16_6.webp"></p>
<p>選択すると新たに作成するサーバーの設定画面が表示されます。<br>
<code>Server Name</code>に任意の名前をつけましょう。<br>
<img src="https://storage.googleapis.com/newt-files/0b6457fc-12ed-4e95-a4fa-762c7b5251bf/2024-12-16_7.webp" alt="2024-12-16_7.webp"></p>
<p>必要に応じて<code>Optional Attributes</code>の<code>vm.install.path</code>を指定してあげましょう。<br>
<img src="https://storage.googleapis.com/newt-files/c3b49586-4678-4a7d-b42d-84281bf3a1bb/2024-12-16_8.webp" alt="2024-12-16_8.webp"></p>
<p>普段からTomcatを起動するのに個別に指定しているJVMがある場合は同じものを指定してあげましょう。<br>
「Configure Tomcat」を起動して、「Java」タブの「Java Virtual Machine:」で指定している値があればそれと同じものを指定すればokです。<br>
<img src="https://storage.googleapis.com/newt-files/b2d55570-436e-46bd-ad01-be5eb8b8d32b/2024-12-16_10.webp" alt="2024-12-16_10.webp"></p>
<h3>起動してみる</h3>
<p>作成したサーバーを右クリックして「Start Server」で起動してみましょう。<br>
<img src="https://storage.googleapis.com/newt-files/0dda91b4-b110-461e-85a6-bb5e094dac3a/2024-12-16_11.webp" alt="2024-12-16_11.webp"></p>
<p>特に問題がなければ、VSCode内のターミナルにて「Server  startup」的なログが表示されるかと思います。</p>
<p>これでVSCode上からTomcatを起動でき、ログ出力もVSCode内で確認できます。</p>
<p>以上。</p>


VSCodeからTomcatサーバーを起動できるように設定する手順の備忘録

<p>表題にある通り、ローカルPCで開発中のWebアプリ(localhost)に、同じWi-Fiに接続しているiPhone(実機)でアクセスして動作確認したいと思い、esetの設定を行った際の備忘録です。<br>
私の場合はReactアプリですが、Reactでなくともこの辺りの設定は変わらないと思います。実機もiPhoneでない場合も同じかと思います。(試してはいません)</p>
<h2>前提および対象者</h2>
<p>本記事の内容は以下の項目(環境等)が前提となります。</p>
<ul>
<li>localhostでWebアプリを立ち上げているPC(開発に使用しているPC)はWindowsで、かつESET(セキュリティソフト)を使用している</li>
<li>PCと実機(iPhone)は同じWi-Fiに接続されている</li>
</ul>
<h2>設定方法</h2>
<h3>iPhoneのipアドレス確認</h3>
<p>まず、iPhoneがWi-Fiに接続している際のipアドレスを確認しておきます。<br>
設定 &gt; Wi-Fi &gt; 接続しているWi-Fiをタップ &gt; 下の方にある「IPアドレス」を確認<br>
<img src="https://storage.googleapis.com/newt-files/2c95e51a-66ea-4ca2-a6ce-55fa46b1d609%2FS__81870852.jpg" alt="S__81870852.jpg"><br>
<img src="https://storage.googleapis.com/newt-files/03adf448-7978-4006-b0f8-82de4911ea58%2FS__81870854.jpg" alt="S__81870854.jpg"><br>
<img src="https://storage.googleapis.com/newt-files/3af06dd6-7074-4386-8bf7-a389b14383e7%2FS__81870855.jpg" alt="S__81870855.jpg"><br>
確認したらこれをメモしておきましょう。</p>
<h3>ESETの設置</h3>
<p>PCでESETを開き以下のように設定します。</p>
<ol>
<li>左メニューの「設置」を選択し「ネットワーク保護」をクリック<br>
<img src="https://storage.googleapis.com/newt-files/ff011aaf-b056-44e7-8bc6-dfa5ec33a33c%2F2023-03-11_1.png" alt="2023-03-11_1.png"></li>
<li>「ファイアウォール」の項目の右端の歯車アイコンをクリックし「設定...」を選択<br>
<img src="https://storage.googleapis.com/newt-files/4e2e1828-41e6-4b28-a782-3defab3b14ab%2F2023-03-11_2.png" alt="2023-03-11_2.png"></li>
<li>左メニューの「ファイアウォール」の項目を選択し、「詳細」の欄を展開し中にある「編集」をクリック<br>
<img src="https://storage.googleapis.com/newt-files/1b0bca30-e095-4d9d-8998-ebc41bfa18a3%2F2023-03-11_3.png" alt="2023-03-11_3.png"></li>
<li>「ファイアウォールルール」ウィンドウが開くので、下の方にある「追加」ボタンをクリック<br>
<img src="https://storage.googleapis.com/newt-files/8b2e6ee6-e759-49f7-bd1b-bd44894b0a4e%2F2023-03-11_4.png" alt="2023-03-11_4.png"></li>
<li>「一般」タブで以下の項目を入力</li>
</ol>
<ul>
<li>名前→何用途のルールかわかるように名前をつける</li>
<li>方向→私は「内向き」で設定しましたが、各々必要に応じで変更してください。</li>
<li>アクション→「許可」にします。</li>
<li>プロトコル→「TCPおよびUDP」でok<br>
<img src="https://storage.googleapis.com/newt-files/d30a0723-222c-43f0-8588-9e824d22065a%2F2023-03-11_5.png" alt="2023-03-11_5.png"></li>
</ul>
<ol start="6">
<li>「ローカル」タブで、「ポート」の欄に開発中にWebアプリをlocalhostで立ち上げる際に使用しているポート番号を入力<br>
<img src="https://storage.googleapis.com/newt-files/1a7c9b34-a499-4d9f-817b-f95f08f859bc%2F2023-03-11_6.png" alt="2023-03-11_6.png"></li>
<li>「リモート」タブで、「IP」の欄に先程メモしておいた実機(iPhone等)のipアドレスを入力<br>
<img src="https://storage.googleapis.com/newt-files/c7bb61a6-bd45-4f36-b3cf-e3843900a155%2F2023-03-11_7.png" alt="2023-03-11_7.png"></li>
<li>OKボタンで各ウィンドウを閉じて設定を適用する。</li>
</ol>
<p>設定は以上になります。</p>
<p>あとはiPhoneでSafari等を起動し、「PCのipアドレス:ポート番号」にアクセスすればPCで立ち上げているWebアプリにアクセスできるはずです。</p>
<p>以上！</p>


#Webアプリ開発Tips

VSCodeからTomcatサーバーを起動できるように設定する手順の備忘録

【React/iPhone/localhost】ESETを使っているWindowsPCで、開発しているWebアプリ(localhost)にiPhoneでアクセスできるようにして動作確認をする【Wi-Fi】