VS Code WindowsでWSL開発　localhost 編

Posted at 2026-07-20

　MSストアーへ行って　各種強化。
　PowerShellのアップデート　Webで二段認証などのため入れる。
　これが本命。起動

日本語などのアプリ（拡張機能）を入れる。wslと入れてやると、
　が出てくるからストアwslでを入れてやってから、起動する。
　再チャレンジ　　必要なら入れる。
＜＜入れてある拡張リスト＞＞

set VC(code)_apuri.txt

2026/07/19 VC(code) 拡張機能リスト

# ==============================
# Windows ローカル
# ==============================
aadityanarayan.code-snap
aaravb.chrome-extension-developer-tools
akamud.vscode-javascript-snippet-pack       # ローカルのみ
asf.apache-netbeans-java
bmewburn.vscode-intelephense-client
bscan.perlnavigator
christian-kohler.npm-intellisense
d9705996.perl-toolbox
devsense.composer-php-vscode
devsense.intelli-php-vscode
devsense.phptools-vscode
devsense.profiler-php-vscode
ecmel.vscode-html-css
eiminsasete.apacheconf-snippets
firefox-devtools.vscode-firefox-debug       # ローカルのみ
linfengchen.wsl-pro-manager
mrmlnc.vscode-apache
ms-azuretools.vscode-containers
ms-ceintl.vscode-language-pack-ja
ms-edgedevtools.vscode-edge-devtools
ms-python.debugpy
ms-python.python
ms-python.vscode-pylance                    # ローカルのみ
ms-python.vscode-python-envs
ms-vscode.js-debug-nightly
ms-vscode.notepadplusplus-keybindings       # ローカルのみ
ms-vscode.remote-explorer                   # ローカルのみ
ms-vscode-remote.remote-containers          # ローカルのみ
ms-vscode-remote.remote-ssh                 # ローカルのみ
ms-vscode-remote.remote-ssh-edit            # ローカルのみ
ms-vscode-remote.remote-wsl                 # ローカルのみ
ms-vscode.vscode-typescript-next
orogeek.live-edge-devtools
rezbouchabou.remote-ssh-sudo
ritwickdey.liveserver
sidthesloth.html5-boilerplate               # ローカルのみ
typescriptteam.native-preview
xabikos.javascriptsnippets                  # ローカルのみ
xdebug.php-debug
zhiyuan-lin.simple-perl
zobo.php-intellisense

# ==============================
# WSL (deepin)
# ==============================
aadityanarayan.code-snap
aaravb.chrome-extension-developer-tools
asf.apache-netbeans-java
bmewburn.vscode-intelephense-client
bscan.perlnavigator
christian-kohler.npm-intellisense
d9705996.perl-toolbox
devsense.composer-php-vscode
devsense.intelli-php-vscode
devsense.phptools-vscode
devsense.profiler-php-vscode
ecmel.vscode-html-css
eiminsasete.apacheconf-snippets
linfengchen.wsl-pro-manager
mrmlnc.vscode-apache
ms-azuretools.vscode-containers
ms-ceintl.vscode-language-pack-ja
ms-edgedevtools.vscode-edge-devtools
ms-python.debugpy
ms-python.python
ms-python.vscode-python-envs
ms-vscode.js-debug-nightly
ms-vscode.vscode-typescript-next
orogeek.live-edge-devtools
rezbouchabou.remote-ssh-sudo
ritwickdey.liveserver
typescriptteam.native-preview
xdebug.php-debug
zhiyuan-lin.simple-perl
zobo.php-intellisense                       # WSLのみ

# ==============================
# 差分まとめ
# ==============================
# ローカルのみ:
#   akamud.vscode-javascript-snippet-pack
#   firefox-devtools.vscode-firefox-debug
#   ms-python.vscode-pylance
#   ms-vscode.notepadplusplus-keybindings
#   ms-vscode.remote-explorer
#   ms-vscode-remote.remote-containers
#   ms-vscode-remote.remote-ssh
#   ms-vscode-remote.remote-ssh-edit
#   ms-vscode-remote.remote-wsl
#   sidthesloth.html5-boilerplate
#   xabikos.javascriptsnippets
#
# WSLのみ:
#   zobo.php-intellisense

# ==============================
# 追加推奨
# ==============================
# [優先] Pylance を WSL にも追加（ローカルのみで未インストール）
#   ms-python.vscode-pylance
#   → Python補完・型チェックが強化される
#   インストール: code --install-extension ms-python.vscode-pylance

# [任意] Git管理
#   eamodio.gitlens
#   → 変更履歴・blame表示など。ファイルコピー運用なら不要

# [任意] スクリプトをVS Code上で直接実行
#   formulahendry.code-runner
#   → Perl / Python をターミナルに切り替えずに実行できる
#   インストール: code --install-extension formulahendry.code-runner

# ※ PHP/Perl/Apache 関連は現状で十分。追加不要。

PCとｗｓｌ（Ubuntu）をコネクトしておいてやる。

＊＊WSLはFirefoxメインだから入れて置く＊＊
　

Wsl ターミナル$　入力での例

set_wsl_sinkuro26_07_19.txt

## 使い方
2026/07/19 make.1st. 
# 一般
# 主な命令
wsl --install
wsl --uninsutall
# ただしwslが消えるだけでubuntuは初期化されないname,passはそのまま残る。
# 変更再トライはMSストアの deepin wsl だが、万能ではない。新しく出来る場合がある。
wsl ls -la

cd var/www/                 ;階層移動
dir                         ;ディレクトリ一覧
ls -l                       ;l= (エル)リスト詳細一覧

sudo rm -ri me_localhost    ;ディレクトリ名を指定して消す
cp source.txt /path/to/destination/    ;copy this /dir/after/ <=in this ;after/が禁止だと行かない。

notepad.exe this-name

# 最初
sudo apt update && sudo apt upgrade
# 同じ
sudo apt update
sudo apt upgrade


# fast in
sudo apt install firefox
sudo apt install apache2
sudo apt install perl python3

# shebang パス確認（CGIスクリプト1行目と合わせる）
which perl      # → /usr/bin/perl
which python3   # → /usr/bin/python3


# ffa 不成立あり
sudo snap install firefox --channel=latest/stable
sudo snap set firefox locale=ja

# ap2
sudo systemctl status apache2
sudo systemctl enable apache2

# ap2 再起動
sudo systemctl reload apache2
## 一般
sudo systemctl daemon-reload
sudo systemctl restart apache2

sudo systemctl start apache2
sudo systemctl stop apache2
sudo systemctl restart apache2

#重要なディレクトリとファイル
# apache 起動で出来る
sudo mkdir /var/www/html

sudo chown -R $USER:$USER /var/www/
sudo chmod -R 777 /var/www/html
# maike etc
sudo mkdir /var/www/html/etc/etc2
sudo chmod -R 777 /var/www/html
sudo chmod -R 777 /var/www/html/etc/etc2
#Webコンテンツのルートディレクトリ: /var/www/html

sudo chown -R 777 /etc/apache2/apache2.conf
#メイン設定ファイル: /etc/apache2/apache2.conf
# conf after this cgi case.local_cgi.cgi
sudo a2enmod cgi
sudo systemctl daemon-reload
sudo systemctl restart apache2
sudo chmod +x /var/www/html/local_cgi.cgi

#仮想ホスト設定: /etc/apache2/sites-available/および/etc/apache2/sites-enabled/   書き換えが必要なら777にする

#ログファイル:
tail -f /var/log/apache2/access.log
# アクセスログ: /var/log/apache2/access.log
sudo truncate -s 0 /var/log/apache2/access.log
tail -f /var/log/apache2/error.log
# エラーログ: /var/log/apache2/error.log
sudo truncate -s 0 /var/log/apache2/error.log
## Clear ness it.
sudo truncate -s 0 /var/log/apache2/access.log /var/log/apache2/error.log

ディレクトリの新規作成と書き換え付与（書き換え不能内で）
sudo mkdir /var/www/html
sudo chown -R $USER:$USER /var/www/
sudo chmod -R 777 /var/www/html

# 1. 全部入れる
sudo apt update
sudo apt install -y apache2

# 2. CGI有効化
sudo a2enmod cgi
sudo systemctl restart apache2

# make set $USER:$USER and -R 777 /var/www/html this /html/
cp local.html /var/www/html/
cp local.cgi /var/www/html/
cp local.pl /var/www/html/
cp local_python.cgi /var/www/html/
cp local_py.py /var/www/html/

sudo chmod 666 /var/www/html/local.html
sudo chmod +x /var/www/html/local.cgi
sudo chmod +x /var/www/html/local.pl
sudo chmod +x /var/www/html/local_python.cgi
sudo chmod +x /var/www/html/local_py.py

sudo mkdir /var/www/html/cgi_or_bin/
sudo chown -R $USER:$USER /var/www/html/cgi_or_bin/

cp local.html /var/www/html/cgi_or_bin
cp local.cgi /var/www/html/cgi_or_bin
cp local.pl /var/www/html/cgi_or_bin
cp local_python.cgi /var/www/html/cgi_or_bin
cp local_py.py /var/www/html/cgi_or_bin

sudo chmod 666 /var/www/html/cgi_or_bin/local.html
sudo chmod +x /var/www/html/cgi_or_bin/local.cgi
sudo chmod +x /var/www/html/cgi_or_bin/local.pl
sudo chmod +x /var/www/html/cgi_or_bin/local_python.cgi
sudo chmod +x /var/www/html/cgi_or_bin/local_py.py

# apache24 Firefox 合成系 web
#　ブラウザcall
http://localhost/    http://127.0.0.1:80/    http://localhost/index.html    
#  windows 側  Apache2_4 で　windows htdocs/addressing

# welcome wsl Apache!
firefox $ "http://localhost"
firefox $ "http://localhost/index.html"
firefox -new-window "http://localhost/"
firefox -new-window "http://localhost/index.html"

firefox -new-window "http://localhost/local.html"
firefox -new-window "http://localhost/local.cgi"
firefox -new-window "http://localhost/local.pl"
firefox -new-window "http://localhost/local_python.cgi"
firefox -new-window "http://localhost/local_py.py"

firefox -new-window "http://localhost/cgi_or_bin/local.html"
firefox -new-window "http://localhost/cgi_or_bin/local.cgi"
firefox -new-window "http://localhost/cgi_or_bin/local.pl"
firefox -new-window "http://localhost/cgi_or_bin/local_python.cgi"
firefox -new-window "http://localhost/cgi_or_bin/local_py.py"

# single おまけ
cp test.cgi /var/www/html/cgi_or_bin/
chmod +x /var/www/html/cgi_or_bin/test.cgi
firefox -new-window http://localhost/cgi_or_bin/test.cgi


## fast need.

# apache2.conf の編集方法
# sudo nano /etc/apache2/apache2.conf
# または
# sudo nano /etc/apache2/sites-available/000-default.conf
# 編集後は必ず再起動: sudo systemctl restart apache2

# sudo chmod -R 777 /etc/apache2/apache2.conf
# sudo a2enmod cgi
# sudo systemctl daemon-reload
# sudo systemctl restart apache2
# sudo chmod +x /var/www/html/local_cgi.cgi

<Directory /var/www/html>
    Options +ExecCGI +Indexes +FollowSymLinks
    AddHandler cgi-script .cgi .py .pl
    AllowOverride None
    Require all granted
</Directory>
<Directory /var/www/html/pl_py>
    Options +ExecCGI +Indexes +FollowSymLinks
    AddHandler cgi-script .cgi .py .pl
    AllowOverride None
    Require all granted
</Directory>

# ok this end

 # case 2.
# sudo chmod -R 777 /etc/apache2/apache2.conf
# sudo a2enmod cgi
# sudo systemctl daemon-reload
# sudo systemctl restart apache2
# sudo chmod +x /var/www/html/local_cgi.cgi

<Directory /var/www/html>
    Options +ExecCGI +Indexes +FollowSymLinks
    AddHandler cgi-script .cgi .py
    AllowOverride None
    Require all granted
</Directory>
<Directory /var/www/html/pl_py>
    Options +ExecCGI +Indexes +FollowSymLinks
    AddHandler cgi-script .cgi .py
    AllowOverride None
    Require all granted
</Directory>

# ok this end

# etc. you need.

#### 参考組み立て #### 
var/www/htmi/local.html
"Z:\var\www\html\local.html"   クリック　ビュー　fail:///html
<!-- on local.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- firefox $ "http://localhost/local.html" -->    
    <title>Document</title>
</head>
<body>
<h1>me local html URL : http://localhost/local.html</h1>
<h1>"Z:\var\www\html\local.html"</h1>
</body>
</html>
<!-- end -->

##

# <!-- var/www/html/local_cgi.cgi リネーム "Z:\var\www\html\local_cgi.cgi" -->
#!/usr/bin/perl

print "Content-Type: text/html\n\n";
print <<'END_HTML';
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- firefox $ "http://localhost/local_cgi.cgi" -->  
    <!--  sudo chmod -R 777 /var/www/html/   ;:777(F) -->
    <!-- sudo chmod 755 /var/www/html/local_cgi.cgi -->
  
    <title>Document</title>
</head>
<body style="background-color: white; color: black;">
<h1>me local html URL : http://localhost/local_cgi.cgi</h1>
<h1>"Z:\var\www\html\local_cgi.cgi"</h1>
</body>
</html>
END_HTML
exit 0;
# <!-- end -->

##

# <!-- var/www/html/hello_py.cgi "Z:\var\www\html\hello_py.cgi" -->
#!/usr/bin/env python3
print("Content-Type: text/html\n\n")
print("<html><body><h1>Hello,html_py CGI!</h1></body></html>")
# <!-- end -->

階層を入れてテスト　pl_py 上で登録してある。なぜか cgi_or_bin はうまく行かない。
# <!-- var/www/html/pl_py/hello_py.cgi "Z:\var\www\html\pl_py\hello_py.cgi" -->

#!/usr/bin/env python3
print("Content-Type: text/html\r\n\r\n")
print("<!DOCTYPE html>")
print("<html><head><title>Hello,pl_py Python CGI!</title></head><body><h1>Hello, Python CGI!</h1></body></html>")
# http://localhost/pl_py/hello_py.cgi
# first check if the script is executable and has the correct permissions, then ensure that the Apache server is configured to allow CGI execution in the specified directory. Finally, access the script through the web browser to see the output.
# If you encounter any issues, check the Apache error logs for more details on what might be going wrong.
#<!-- firefox $ "http://127.0.0.1/pl_py/hello_py.cgi" -->
# http://127.0.0.1/pl_py/index.html
# lookup in url : http://127.0.0.1/pl_py/hello_py.cgi
exit(0)

# <!-- end -->

##

# <!-- var/www/html/pl_py/hello_py.py "Z:\var\www\html\pl_py\hello_py.py" -->

#!/usr/bin/env python3
print("Content-Type: text/html\n\n")
print("<html><body><h1>Hello,pl_py Python!</h1></body></html>")

# http://127.0.0.1/me_localhost/pl_py/hello_py.py
# This is a simple CGI script that outputs an HTML page with a greeting message. It uses the Content-Type header to specify that the output is HTML, followed by the actual HTML content. When accessed through a web server that supports CGI, it will display "Hello, Python!" in an H1 heading on the page.
# Note: Make sure that the script has executable permissions and that the web server is configured to allow CGI scripts in the specified directory.
# To set executable permissions, you can use the command:
# chmod +x hello_py.py
# Also, ensure that the web server is properly configured to execute CGI scripts from the cgi_or_bin directory.
# For example, if you're using Apache, you may need to enable the CGI module and configure the directory for CGI scripts in the Apache configuration file.
# In Apache, you can add the following lines to your configuration file (e.g., httpd.conf):
# <Directory "/var/www/me_localhost/pl_py">
#     Options +ExecCGI
#     AddHandler cgi-script .py
# </Directory>
# After making these changes, restart the web server to apply the new configuration. You should then be able to access the script via the URL provided and see the greeting message displayed in your web browser.
# Remember to handle any security considerations when allowing CGI scripts to run on your server, as they can potentially be exploited if not properly secured.
# For more complex applications, consider using a web framework like Flask or Django, which provides more features and better security for web development in Python.
# This is a basic example of a CGI script in Python. For more advanced functionality, you can expand the script to handle form data, interact with databases, or generate dynamic content based on user input.
# Always ensure that your CGI scripts are secure and do not expose sensitive information or allow unauthorized access to your server.
# For more information on CGI scripting and web development in Python, you can refer to the official Python documentation and various online resources that provide tutorials and examples for building web applications with Python.
# In summary, this script is a simple demonstration of how to create a CGI script in Python that outputs an HTML page. It serves as a starting point for building more complex web applications using Python and CGI.
# If you want to test the script locally, you can use a simple HTTP server that supports CGI, such as the built-in Python HTTP server. You can run the following command in the terminal to start a CGI-enabled server:
# python3 -m http.server --cgi 8000
# This will start a server on port 8000, and you can access the script by navigating to http://localhost:8000/pl_py/hello_py.py in your web browser. Make sure that the hello_py.py script is located in the pl_py directory of your current working directory
# This will allow you to see the output of the script and verify that it is working correctly. You should see a simple HTML page with the message "Hello,pl_py Python!" displayed in an H1 heading.
# Remember to stop the server when you're done testing by pressing Ctrl+C in the terminal.
exit(0)

# <!-- end -->

## PHP
#  this test_php.php heed is no making.
<html>
<head>
<title>PHP Test</title>
</head>
<BODY BGCOLOR="#ffffff">
<h1>PHP Test - Apache 2.4 日本語</h1>
<!-- http://localhost/test_php.php -->
<p><?php print("Hello World! PHP CGI is working.") ?></p>
<?php
phpinfo();
?>
</body>
</html>
# this test_php.cgi this Apache2.4windows addressing.

#!C:/PHP/php-cgi.exe

<html>
<html lang="ja">
<head>
<title>PHP CGI Test</title>
</head>
<BODY BGCOLOR="#ffffff">
<h1>PHP CGI Test - Apache 2.2</h1>
<!-- http://localhost/test_php.cgi -->
<p><?php print("Hello World! PHP CGI is working.") ?></p>
<?php
phpinfo();
?>
</body>
</html>

# this cess is Japanese utf-8 this php_2_4_php.php PHP8.3.32 on TS zip instilled.
 
<!DOCTYPE html>
<html lang="ja">
<head>
<title>php</title>
</head>
<BODY BGCOLOR="#ffffff">
test 2.4 to <php8 class="3 32"></php8> php new fast is PC restato!!
<h1>おはようございます！</h1>
<p><?php print("Hello World! PHP go on.") ?></p>
<!-- http://localhost/php_2_4_php.php -->
<?php
phpinfo();
?>
</body>
</html>

####
# 3. テストCGI作成
sudo tee /var/www/html/cgi_or_bin/test.cgi > /dev/null << 'EOF'
#!/usr/bin/env python3
print("Content-type: text/html\n")
print("<h1>✅ CGI動きました！</h1>")
print("<p>Python version: ", end="")
import sys; print(sys.version.split()[0])
EOF

sudo chmod 755 /var/www/html/cgi_or_bin/test.cgi

# 3-2. テストPerl CGI作成
sudo tee /var/www/html/cgi_or_bin/test.pl > /dev/null << 'EOF'
#!/usr/bin/perl
print "Content-type: text/html\\n\\n";
print "<h1>Perl CGI OK</h1>\n";
EOF

sudo chmod 755 /var/www/html/cgi_or_bin/test.pl

# 4. 再起動
sudo systemctl restart apache2

# 5. アクセス確認
firefox -new-window "http://localhost/cgi_or_bin/test.cgi"
firefox -new-window "http://localhost/cgi_or_bin/test.pl"

# 6. エラー確認
tail -f /var/log/apache2/error.log

##### All End ##### see you again.

以上、健闘を祈る。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

VS Code WindowsでWSL開発 localhost 編

Wsl ターミナル$ 入力での例

VS Code WindowsでWSL開発　localhost 編

Wsl ターミナル$　入力での例