adds devcontainer for Azure Static Web Apps (#578)
This commit is contained in:
Alvaro Videla
GitHub
Родитель
f415b231f7
Коммит
40d09a0806
|
|
@ -0,0 +1,9 @@
|
|||
# Find the Dockerfile for mcr.microsoft.com/azure-functions/python:3.0-python3.8-core-tools at this URL
|
||||
# https://github.com/Azure/azure-functions-docker/blob/master/host/3.0/buster/amd64/python/python38/python38-core-tools.Dockerfile
|
||||
FROM mcr.microsoft.com/azure-functions/python:3.0-python3.8-core-tools
|
||||
|
||||
ENV NVM_DIR="/usr/local/share/nvm"
|
||||
ENV NVM_SYMLINK_CURRENT=true \
|
||||
PATH=${NVM_DIR}/current/bin:${PATH}
|
||||
COPY library-scripts/node-debian.sh /tmp/library-scripts/
|
||||
RUN apt-get update && bash /tmp/library-scripts/node-debian.sh "${NVM_DIR}"
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"name": "Azure Static Web Apps",
|
||||
"dockerFile": "Dockerfile",
|
||||
"forwardPorts": [ 7071, 5500 ],
|
||||
|
||||
// Set *default* container specific settings.json values on container create.
|
||||
"settings": {
|
||||
"terminal.integrated.shell.linux": "/bin/bash"
|
||||
},
|
||||
|
||||
// Add the IDs of extensions you want installed when the container is created.
|
||||
"extensions": [
|
||||
"ms-azuretools.vscode-azurefunctions",
|
||||
"ms-azuretools.vscode-azurestaticwebapps",
|
||||
"ms-dotnettools.csharp",
|
||||
"ms-python.python",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"ritwickdey.liveserver"
|
||||
],
|
||||
|
||||
// Use 'postCreateCommand' to run commands after the container is created.
|
||||
"postCreateCommand": "source ${NVM_DIR}/nvm.sh && nvm install --lts",
|
||||
|
||||
// Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
|
||||
// "remoteUser": "vscode"
|
||||
}
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
#!/bin/bash
|
||||
#-------------------------------------------------------------------------------------------------------------
|
||||
# Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
# Licensed under the MIT License. See https://go.microsoft.com/fwlink/?linkid=2090316 for license information.
|
||||
#-------------------------------------------------------------------------------------------------------------
|
||||
|
||||
# Syntax: ./node-debian.sh [directory to install nvm] [node version to install (use "none" to skip)] [non-root user]
|
||||
|
||||
export NVM_DIR=${1:-"/usr/local/share/nvm"}
|
||||
export NODE_VERSION=${2:-"lts/*"}
|
||||
USERNAME=${3:-"vscode"}
|
||||
UPDATE_RC=${4:-"true"}
|
||||
|
||||
set -e
|
||||
|
||||
if [ "$(id -u)" -ne 0 ]; then
|
||||
echo -e 'Script must be run a root. Use sudo, su, or add "USER root" to your Dockerfile before running this script.'
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Treat a user name of "none" or non-existant user as root
|
||||
if [ "${USERNAME}" = "none" ] || ! id -u ${USERNAME} > /dev/null 2>&1; then
|
||||
USERNAME=root
|
||||
fi
|
||||
|
||||
if [ "${NODE_VERSION}" = "none" ]; then
|
||||
export NODE_VERSION=
|
||||
fi
|
||||
|
||||
# Ensure apt is in non-interactive to avoid prompts
|
||||
export DEBIAN_FRONTEND=noninteractive
|
||||
|
||||
# Install curl, apt-transport-https, tar, or gpg if missing
|
||||
if ! dpkg -s apt-transport-https curl ca-certificates tar > /dev/null 2>&1 || ! type gpg > /dev/null 2>&1; then
|
||||
if [ ! -d "/var/lib/apt/lists" ] || [ "$(ls /var/lib/apt/lists/ | wc -l)" = "0" ]; then
|
||||
apt-get update
|
||||
fi
|
||||
apt-get -y install --no-install-recommends apt-transport-https curl ca-certificates tar gnupg2
|
||||
fi
|
||||
|
||||
# Install yarn
|
||||
if type yarn > /dev/null 2>&1; then
|
||||
echo "Yarn already installed."
|
||||
else
|
||||
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | (OUT=$(apt-key add - 2>&1) || echo $OUT)
|
||||
echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
|
||||
apt-get update
|
||||
apt-get -y install --no-install-recommends yarn
|
||||
fi
|
||||
|
||||
# Install the specified node version if NVM directory already exists, then exit
|
||||
if [ -d "${NVM_DIR}" ]; then
|
||||
echo "NVM already installed."
|
||||
if [ "${NODE_VERSION}" != "" ]; then
|
||||
su ${USERNAME} -c "source $NVM_DIR/nvm.sh && nvm install ${NODE_VERSION} && nvm clear-cache"
|
||||
fi
|
||||
exit 0
|
||||
fi
|
||||
|
||||
|
||||
# Run NVM installer as non-root if needed
|
||||
mkdir -p ${NVM_DIR}
|
||||
chown ${USERNAME} ${NVM_DIR}
|
||||
su ${USERNAME} -c "$(cat << EOF
|
||||
set -e
|
||||
|
||||
# Do not update profile - we'll do this manually
|
||||
export PROFILE=/dev/null
|
||||
|
||||
curl -so- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
|
||||
source ${NVM_DIR}/nvm.sh
|
||||
if [ "${NODE_VERSION}" != "" ]; then
|
||||
nvm alias default ${NODE_VERSION}
|
||||
fi
|
||||
nvm clear-cache
|
||||
EOF
|
||||
)" 2>&1
|
||||
|
||||
if [ "${UPDATE_RC}" = "true" ]; then
|
||||
echo "Updating /etc/bash.bashrc and /etc/zsh/zshrc with NVM scripts..."
|
||||
(cat <<EOF
|
||||
export NVM_DIR="${NVM_DIR}"
|
||||
sudoIf()
|
||||
{
|
||||
if [ "\$(id -u)" -ne 0 ]; then
|
||||
sudo "\$@"
|
||||
else
|
||||
"\$@"
|
||||
fi
|
||||
}
|
||||
if [ "\$(stat -c '%U' \$NVM_DIR)" != "${USERNAME}" ]; then
|
||||
if [ "\$(id -u)" -eq 0 ] || type sudo > /dev/null 2>&1; then
|
||||
echo "Fixing permissions of \"\$NVM_DIR\"..."
|
||||
sudoIf chown -R ${USERNAME}:root \$NVM_DIR
|
||||
else
|
||||
echo "Warning: NVM directory is not owned by ${USERNAME} and sudo is not installed. Unable to correct permissions."
|
||||
fi
|
||||
fi
|
||||
[ -s "\$NVM_DIR/nvm.sh" ] && . "\$NVM_DIR/nvm.sh"
|
||||
[ -s "\$NVM_DIR/bash_completion" ] && . "\$NVM_DIR/bash_completion"
|
||||
EOF
|
||||
) | tee -a /etc/bash.bashrc >> /etc/zsh/zshrc
|
||||
fi
|
||||
|
||||
echo "Done!"
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
README.md
|
||||
test-project
|
||||
definition-manifest.json
|
||||
.vscode
|
||||
.npmignore
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
# Azure Functions & Node.js
|
||||
|
||||
## Summary
|
||||
|
||||
*Develop Azure Static Web Apps & Azure Functions in Node.js. Includes Node.js, eslint, the Azure Functions SDK, and related extensions and dependencies.*
|
||||
|
||||
| Metadata | Value |
|
||||
|----------|-------|
|
||||
| *Contributors* | The Azure Functions Team & alvaro.videla@microsoft.com |
|
||||
| *Definition type* | Dockerfile |
|
||||
| *Published images* | mcr.microsoft.com/azure-functions/node |
|
||||
| *Available image variants* | 10, 12 |
|
||||
| *Published image architecture(s)* | x86-64 |
|
||||
| *Works in Codespaces* | Yes |
|
||||
| *Container host OS support* | Linux, macOS, Windows |
|
||||
| *Languages, platforms* | Azure Functions, Node.js, JavaScript |
|
||||
|
||||
## Using this definition with an existing folder
|
||||
|
||||
This definition requires an Azure subscription to use. You can create a [free account here](https://azure.microsoft.com/en-us/free/serverless/) and learn more about using [Azure Functions with VS Code here](https://docs.microsoft.com/en-us/azure/azure-functions/functions-create-first-function-vs-code).
|
||||
|
||||
While this definition should work unmodified, you can select the version of Node.js the container uses by updating the `VARIANT` arg in the included `devcontainer.json` to a supported major Node.js release version.
|
||||
|
||||
```json
|
||||
"args": { "VARIANT": "10" }
|
||||
```
|
||||
|
||||
### Adding the definition to your folder
|
||||
|
||||
Once you have an Azure account, follow these steps:
|
||||
|
||||
1. If this is your first time using a development container, please follow the [getting started steps](https://aka.ms/vscode-remote/containers/getting-started) to set up your machine.
|
||||
|
||||
2. To use VS Code's copy of this definition:
|
||||
1. Start VS Code and open your project folder.
|
||||
2. Press <kbd>F1</kbd> select and **Remote-Containers: Add Development Container Configuration Files...** from the command palette.
|
||||
3. Select the Azure Static Web Apps definition.
|
||||
|
||||
3. To use latest-and-greatest copy of this definition from the repository:
|
||||
1. Clone this repository.
|
||||
2. Copy the contents of `containers/azure-static-web-apps/.devcontainer` to the root of your project folder.
|
||||
3. Start VS Code and open your project folder.
|
||||
|
||||
4. After following step 2 or 3, the contents of the `.devcontainer` folder in your project can be adapted to meet your needs.
|
||||
|
||||
5. Finally, press <kbd>F1</kbd> and run **Remote-Containers: Reopen Folder in Container** to start using the definition.
|
||||
|
||||
Take a look at the files inside `./test-project/.vscode.sample` to see if you need to adapt the settings for Live Server, or the Azure Functions Core Tools, specifically `settings.json` or `tasks.json`.
|
||||
|
||||
## Testing the definition
|
||||
|
||||
This definition includes some test code that will help you verify it is working as expected on your system. Follow these steps:
|
||||
|
||||
1. If this is your first time using a development container, please follow the [getting started steps](https://aka.ms/vscode-remote/containers/getting-started) to set up your machine.
|
||||
2. Clone this repository.
|
||||
3. Start VS Code, press <kbd>F1</kbd>, and select **Remote-Containers: Open Folder in Container...**
|
||||
4. Select the `containers/azure-static-web-apps` folder.
|
||||
5. After the folder has opened in the container, copy the folder `./test-project/.vscode.sample` to `.vscode`, so that the proper settings for running Azure Functions are loaded (this is only needed for testing). Press <kbd>F1</kbd> and type "Reload Window" for the config changes to take effect.
|
||||
6. Copy `./test-project/api/local.settings.json.sample` into `./test-project/api/local.settings.json`
|
||||
7. press <kbd>F1</kbd> and select **Live Server: Open with Live Server**.
|
||||
8. Press <kbd>F5</kbd> to start debugging project.
|
||||
9. After the debugger is started, open a local browser and enter the URL: `http://localhost:5500`.
|
||||
- If the port 7071 is not already open, press <kbd>F1</kbd>, select **Remote-Containers: Forward Port from Container...**, and then port 7071.
|
||||
10. You should see the "Vanilla Javascript App" with the message "Loading content from the API: Hello from the API" and the result from Azure Function.
|
||||
11. From here, you can add breakpoints or edit the contents of the `test-project` folder to do further testing.
|
||||
|
||||
## License
|
||||
|
||||
Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
|
||||
Licensed under the MIT License. See [LICENSE](https://github.com/Microsoft/vscode-dev-containers/blob/master/LICENSE).
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Attach to Node Functions",
|
||||
"type": "node",
|
||||
"request": "attach",
|
||||
"port": 9229,
|
||||
"preLaunchTask": "func: host start",
|
||||
"cwd": "${fileDirname}"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"azureFunctions.deploySubpath": "./test-project/api",
|
||||
"azureFunctions.postDeployTask": "npm install",
|
||||
"azureFunctions.projectLanguage": "JavaScript",
|
||||
"azureFunctions.projectRuntime": "~3",
|
||||
"debug.internalConsoleOptions": "neverOpen",
|
||||
"azureFunctions.preDeployTask": "npm prune",
|
||||
"liveServer.settings.root": "/test-project",
|
||||
"liveServer.settings.proxy": {
|
||||
"enable": true,
|
||||
"baseUri": "/api",
|
||||
"proxyUri": "http://127.0.0.1:7071/api"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"version": "2.0.0",
|
||||
"tasks": [
|
||||
{
|
||||
"type": "func",
|
||||
"command": "host start",
|
||||
"problemMatcher": "$func-watch",
|
||||
"isBackground": true,
|
||||
"dependsOn": "npm install",
|
||||
"options": {
|
||||
"cwd": "${workspaceFolder}/test-project/api"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "shell",
|
||||
"label": "npm install",
|
||||
"command": "npm install"
|
||||
},
|
||||
{
|
||||
"type": "shell",
|
||||
"label": "npm prune",
|
||||
"command": "npm prune --production",
|
||||
"problemMatcher": []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
*.js.map
|
||||
*.ts
|
||||
.git*
|
||||
.vscode
|
||||
local.settings.json
|
||||
test
|
||||
tsconfig.json
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# TypeScript v1 declaration files
|
||||
typings/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
.env.test
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
|
||||
# next.js build output
|
||||
.next
|
||||
|
||||
# nuxt.js build output
|
||||
.nuxt
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TypeScript output
|
||||
dist
|
||||
out
|
||||
|
||||
# Azure Functions artifacts
|
||||
bin
|
||||
obj
|
||||
appsettings.json
|
||||
local.settings.json
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"bindings": [
|
||||
{
|
||||
"authLevel": "anonymous",
|
||||
"type": "httpTrigger",
|
||||
"direction": "in",
|
||||
"name": "req",
|
||||
"methods": [
|
||||
"get"
|
||||
],
|
||||
"route": "message"
|
||||
},
|
||||
{
|
||||
"type": "http",
|
||||
"direction": "out",
|
||||
"name": "res"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
module.exports = async function (context, req) {
|
||||
context.res = {
|
||||
body: {
|
||||
text: "Hello from the API"
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"name": "Azure"
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"version": "2.0",
|
||||
"logging": {
|
||||
"applicationInsights": {
|
||||
"samplingSettings": {
|
||||
"isEnabled": true,
|
||||
"excludedTypes": "Request"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extensionBundle": {
|
||||
"id": "Microsoft.Azure.Functions.ExtensionBundle",
|
||||
"version": "[1.*, 2.0.0)"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"IsEncrypted": false,
|
||||
"Values": {
|
||||
"AzureWebJobsStorage": "",
|
||||
"FUNCTIONS_WORKER_RUNTIME": "node"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"name": "api",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"scripts": {
|
||||
"start": "func start",
|
||||
"test": "echo \"No tests yet...\""
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "http://json.schemastore.org/proxies",
|
||||
"proxies": {}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>Vanilla JavaScript App</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<h1>Vanilla JavaScript App</h1>
|
||||
<p>Loading content from the API: <b id="name">...</b></p>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
(async function() {
|
||||
let { text } = await( await fetch(`/api/message`)).json();
|
||||
document.querySelector('#name').textContent = text;
|
||||
}())
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
* {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
main > h1 {
|
||||
text-align: center;
|
||||
font-size: 3.5em;
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче