【swa】Azure Static Web Appsをローカル環境でデバッグ

$ which black
/home/admin/.local/bin/black
$ which flake8
/home/admin/.local/bin/flake8

$ cat .vscode-server/data/Machine/settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "python.formatting.provider": "black",
  "python.linting.pylintEnabled": false,
  "python.linting.flake8Enabled": true,
  "python.linting.flake8Args": [
    "--max-line-length=88",
    "--ignore=E203,W503,W504"
  ]
}

$ cd sample-project
$ npm start

$ cd ~
$ curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
$ sudo mv microsoft.gpg /etc/apt/trusted.gpg.d/microsoft.gpg
$ sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/microsoft-ubuntu-$(lsb_release -cs)-prod $(lsb_release -cs) main" > /etc/apt/sources.list.d/dotnetdev.list'
$ sudo apt update
$ sudo apt install azure-functions-core-tools-4

$ sudo apt install python3.8-venv

9:35:13 PM: Running command: "python3 -m venv .venv"...
The virtual environment was not created successfully because ensurepip is not
available.  On Debian/Ubuntu systems, you need to install the python3-venv
package using the following command.

    apt install python3.8-venv

You may need to use sudo with that command.  After installing the python3-venv
package, recreate your virtual environment.

Failing command: ['/home/admin/sample-project/api/.venv/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']

9:35:14 PM: Error: Failed to run "python3" command. Check output window for more details.

$ curl http://localhost:7071/api/HttpTrigger1
This HTTP triggered function executed successfully.Pass a name in the query string or in the request body for a personalized response.
$ curl http://localhost:7071/api/HttpTrigger1?name=John
Hello, John. This HTTP triggered function executed successfully.

$ sudo npm install -g @azure/static-web-apps-cli --unsafe-perm
$ npm run build
$ swa start

$ npm run build
$ swa start ./build --api-location ./api

$ curl http://localhost:7071/api/HttpTrigger1
This HTTP triggered function executed successfully.Pass a name in the query string or in the request body for a personalized response.
$ curl http://localhost:4280/api/HttpTrigger1
This HTTP triggered function executed successfully.Pass a name in the query string or in the request body for a personalized response.

$ npm install axios

import React, { useRef, useState } from 'react';
import axios, { AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
import logo from './logo.svg';
import './App.css';

const options: AxiosRequestConfig = {
  url: `/api/HttpTrigger1`,
  method: 'GET',
};
function App() {
  const inputRef = useRef<HTMLInputElement>(null);
  const [response, setResponse] = useState('');
  const handleAPIGet = () => {
    axios({
      ...options,
      params: {
        name: inputRef.current?.value || '',
      },
    })
      .then((res: AxiosResponse<string>) => {
        const { data } = res;
        setResponse(data);
      })
      .catch((e: AxiosError<{ error: string }>) => {
        console.log(e.message); // eslint-disable-line no-console
      });
  };
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <div>
          <input ref={inputRef} type="text" name="name" />
          <button type="submit" onClick={handleAPIGet}>
            API Get!
          </button>
          <p>Response : {response}</p>
        </div>
      </header>
    </div>
  );
}

export default App;

$ cd ~/sample-project
$ npm start

$ cd ~/sample-project
$ swa start http://localhost:3000 --api-location http://localhost:7071