Azure Static Web AppsでVuePressサイトをつくーる

# はじめに

このチュートリアルやっていきます
https://docs.microsoft.com/ja-jp/azure/static-web-apps/publish-vuepress

# 開発環境
- Node.js
- GitHub
- Azure 
- Windows 10

# 導入
1．vuepress-static-appフォルダの作成

2．README.mdの作成

~~~README.md
# Hello From VuePress
~~~

3．node.jsのコマンドプロンプトを起動

~~~cmd
cd vuepress-static-app
npm init -y
npm install --save-dev vuepress
~~~

4．package.jsonを編集

~~~package.json
{
  "name": "vuepress-static-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "vuepress build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vuepress": "^1.8.2"
  }
}
~~~

5．.gitignoreを作成

~~~.gitignore
node_modules
~~~

6．コミット

~~~
 git init
 git add .
 git commit -m "initial commit"
~~~


7．https://github.com/new から新しいgitレポジトリを作成（名前はvuepress-static-app, Private、ここでREADMEは作成しない）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/aa969b3c-816a-c260-9bca-e61d9cae32f1.png)

8．push

~~~
git remote add origin https://github.com/SatoshiRobatoFujimoto/vuepress-static-app.git
git branch -M main
git push -u origin main
~~~

9．AzureポータルでStatic Web Appを作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/dc5c9cb1-ff0e-388e-9e45-e894e82e7681.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/87799eed-18f7-5f7d-9ead-7db98b1bd87d.png)

10．確認および作成

11．GitHub アクションが無事に成功したらURLにアクセス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/94bb83b5-21b1-b06c-0fd2-19f8b010a36b.png)

きたこれ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/e643959c-cc35-7a05-b3eb-065677ec23e9.png)

12．ローカルで開発するためにpackage.jsonを編集

~~~
{
  "name": "vuepress-static-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vuepress dev",
    "build": "vuepress build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vuepress": "^1.8.2"
  }
}
~~~

13．dev環境を起動し、http://localhost:8080/ にアクセスしてみる

~~~cmd
npm run dev
~~~

14．タイトルとナビゲーションを作成する。.vuepressフォルダを作成し、下記のconfig.jsを作成する。
https://github.com/reverentgeek/vuepress-authentication-tutorial

~~~config.js
module.exports = {
  title: "My Documentation Site",
  description: "This is going to be awesome!",
  themeConfig: {
    nav: [
      { text: "Home", link: "/" },
      { text: "About", link: "/about/" }
    ]
  }
};
~~~


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/4c2a1748-72f3-a78b-efcb-83b26854d0e8.png)

<!-- 
15．認証
oktaに登録
https://developer.okta.com/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/20bd2ed2-1335-bc8b-0400-a8e72adb35bc.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/4e97bf88-477c-d687-a73d-1b7b5f0b0015.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/d1bd7245-721d-0bba-17f9-9c5075e8a5cd.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/2edc0883-d4b9-ea04-6747-acd30c9e5534.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/18558e5b-909e-97a5-f7f8-9ac57e4b812b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/723ecb68-1abf-6fbb-db4c-671f7a335e1a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/b9121fe1-d139-5230-8576-c18d45164c5f.png)

一応Enableにした。使わないけど

npm install @okta/okta-vue@1.1

oktaConfig.jsを作成

~~~oktaConfig.js
export const oktaConfig = {
    issuer: "https://{yourOktaDomain}/oauth2/default",
    client_id: "{yourClientId}",
    redirect_uri: "http://localhost:8080/implicit/callback/",
    scope: "openid profile email"
};
~~~

npm install vuepress@1.0
npx vuepress@1.0 eject docs
-->