зеркало из https://github.com/Azure/ipam.git
Migrated from CRA to Vite and updated NodeJS to v18.x
This commit is contained in:
Matthew Garrett
Родитель
31165c4a3a
Коммит
e38a7236f2
|
|
@ -1,5 +1,6 @@
|
||||||
node_modules
|
node_modules
|
||||||
build
|
build
|
||||||
|
dist
|
||||||
.dockerignore
|
.dockerignore
|
||||||
Dockerfile
|
Dockerfile
|
||||||
Dockerfile.prod
|
Dockerfile.prod
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,8 @@ name: Azure IPAM Testing
|
||||||
run-name: Azure IPAM Deployment & Testing
|
run-name: Azure IPAM Deployment & Testing
|
||||||
|
|
||||||
on:
|
on:
|
||||||
|
push:
|
||||||
|
branches: [ ipam-vite ]
|
||||||
pull_request:
|
pull_request:
|
||||||
branches: [ main ]
|
branches: [ main ]
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
# syntax=docker/dockerfile:1
|
# syntax=docker/dockerfile:1
|
||||||
FROM node:16-slim AS builder
|
FROM node:18-slim AS builder
|
||||||
|
|
||||||
# Set Working Directory
|
# Set Working Directory
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
|
|
@ -41,7 +41,7 @@ RUN mkdir /var/run/sshd
|
||||||
|
|
||||||
# Install NodeJS 16.x
|
# Install NodeJS 16.x
|
||||||
RUN apt install curl -y
|
RUN apt install curl -y
|
||||||
RUN curl -sL https://deb.nodesource.com/setup_16.x -o nodesource_setup.sh
|
RUN curl -sL https://deb.nodesource.com/setup_18.x -o nodesource_setup.sh
|
||||||
RUN bash ./nodesource_setup.sh
|
RUN bash ./nodesource_setup.sh
|
||||||
RUN apt install nodejs
|
RUN apt install nodejs
|
||||||
RUN npm install -g react-inject-env
|
RUN npm install -g react-inject-env
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,10 @@ version: '3.8'
|
||||||
services:
|
services:
|
||||||
ipam-ui:
|
ipam-ui:
|
||||||
environment:
|
environment:
|
||||||
REACT_APP_AZURE_ENV: ${AZURE_ENV}
|
VITE_AZURE_ENV: ${AZURE_ENV}
|
||||||
REACT_APP_UI_ID: ${UI_APP_ID}
|
VITE_UI_ID: ${UI_APP_ID}
|
||||||
REACT_APP_ENGINE_ID: ${ENGINE_APP_ID}
|
VITE_ENGINE_ID: ${ENGINE_APP_ID}
|
||||||
REACT_APP_TENANT_ID: ${TENANT_ID}
|
VITE_TENANT_ID: ${TENANT_ID}
|
||||||
image: azureipam.azurecr.io/ipam-ui:latest
|
image: azureipam.azurecr.io/ipam-ui:latest
|
||||||
ipam-engine:
|
ipam-engine:
|
||||||
environment:
|
environment:
|
||||||
|
|
|
||||||
|
|
@ -7,10 +7,10 @@ services:
|
||||||
args:
|
args:
|
||||||
PORT: 8080
|
PORT: 8080
|
||||||
environment:
|
environment:
|
||||||
REACT_APP_AZURE_ENV: ${AZURE_ENV}
|
VITE_AZURE_ENV: ${AZURE_ENV}
|
||||||
REACT_APP_UI_ID: ${UI_APP_ID}
|
VITE_UI_ID: ${UI_APP_ID}
|
||||||
REACT_APP_ENGINE_ID: ${ENGINE_APP_ID}
|
VITE_ENGINE_ID: ${ENGINE_APP_ID}
|
||||||
REACT_APP_TENANT_ID: ${TENANT_ID}
|
VITE_TENANT_ID: ${TENANT_ID}
|
||||||
WDS_SOCKET_PORT: 3000
|
WDS_SOCKET_PORT: 3000
|
||||||
volumes:
|
volumes:
|
||||||
- ./ui:/app
|
- ./ui:/app
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,7 @@ Azure IPAM is a lightweight solution developed on top of the Azure platform desi
|
||||||
app = FastAPI(
|
app = FastAPI(
|
||||||
title = "Azure IPAM",
|
title = "Azure IPAM",
|
||||||
description = description,
|
description = description,
|
||||||
version = "1.0.0",
|
version = "2.0.0",
|
||||||
contact = {
|
contact = {
|
||||||
"name": "Azure IPAM Team",
|
"name": "Azure IPAM Team",
|
||||||
"url": "https://github.com/azure/ipam",
|
"url": "https://github.com/azure/ipam",
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
node_modules
|
node_modules
|
||||||
build
|
build
|
||||||
|
dist
|
||||||
.dockerignore
|
.dockerignore
|
||||||
Dockerfile.*
|
Dockerfile.*
|
||||||
*.example
|
*.example
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
|
|
||||||
# production
|
# production
|
||||||
/build
|
/build
|
||||||
|
/dist
|
||||||
|
|
||||||
# misc
|
# misc
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
ARG BASE_IMAGE=node:16-slim
|
ARG BASE_IMAGE=node:18-slim
|
||||||
FROM $BASE_IMAGE
|
FROM $BASE_IMAGE
|
||||||
|
|
||||||
ARG PORT=80
|
ARG PORT=80
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
ARG VARIANT=16-bullseye
|
ARG VARIANT=18-bullseye
|
||||||
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:${VARIANT}
|
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:${VARIANT}
|
||||||
|
|
||||||
ARG PORT=3000
|
ARG PORT=3000
|
||||||
|
|
@ -17,6 +17,9 @@ ENV PORT=$PORT
|
||||||
COPY package.json ./
|
COPY package.json ./
|
||||||
COPY package-lock.json ./
|
COPY package-lock.json ./
|
||||||
|
|
||||||
|
# Upgrade NPM
|
||||||
|
RUN npm install npm@latest -g
|
||||||
|
|
||||||
RUN npm install
|
RUN npm install
|
||||||
RUN chmod 777 node_modules
|
RUN chmod 777 node_modules
|
||||||
|
|
||||||
|
|
@ -27,4 +30,4 @@ COPY . ./
|
||||||
EXPOSE $PORT
|
EXPOSE $PORT
|
||||||
|
|
||||||
# start app
|
# start app
|
||||||
CMD ["npm", "start"]
|
CMD npx vite --host "0.0.0.0" --port $PORT
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
ARG BASE_IMAGE=registry.access.redhat.com/ubi8/nodejs-16
|
ARG BASE_IMAGE=registry.access.redhat.com/ubi8/nodejs-18
|
||||||
FROM $BASE_IMAGE
|
FROM $BASE_IMAGE
|
||||||
|
|
||||||
ARG PORT=8080
|
ARG PORT=8080
|
||||||
|
|
|
||||||
|
|
@ -2,30 +2,31 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<script type="text/javascript" src="%PUBLIC_URL%/env.js"></script>
|
<script type="text/javascript" src="/env.js"></script>
|
||||||
<!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
|
<script type="module" src="/src/index.jsx"></script>
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
|
<!-- <link rel="icon" href="/favicon.ico" /> -->
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="Web site created using create-react-app"
|
content="Web site created using create-react-app"
|
||||||
/>
|
/>
|
||||||
<!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
|
<!-- <link rel="apple-touch-icon" href="/logo192.png" /> -->
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||||
<!--
|
<!--
|
||||||
manifest.json provides metadata used when your web app is installed on a
|
manifest.json provides metadata used when your web app is installed on a
|
||||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||||
-->
|
-->
|
||||||
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
|
<!-- <link rel="manifest" href="/manifest.json" /> -->
|
||||||
<link rel="manifest" href="%PUBLIC_URL%/site.webmanifest">
|
<link rel="manifest" href="/site.webmanifest">
|
||||||
<!--
|
<!--
|
||||||
Notice the use of %PUBLIC_URL% in the tags above.
|
Notice the use of in the tags above.
|
||||||
It will be replaced with the URL of the `public` folder during the build.
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
Only files inside the `public` folder can be referenced from the HTML.
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
|
||||||
work correctly both with client-side routing and a non-root public URL.
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
25
ui/init.sh
25
ui/init.sh
|
|
@ -8,5 +8,26 @@ test -e /etc/os-release && os_release='/etc/os-release' || os_release='/usr/lib/
|
||||||
REACT_APP_CONTAINER_IMAGE=${PRETTY_NAME}
|
REACT_APP_CONTAINER_IMAGE=${PRETTY_NAME}
|
||||||
export REACT_APP_CONTAINER_IMAGE
|
export REACT_APP_CONTAINER_IMAGE
|
||||||
|
|
||||||
npx --yes react-inject-env set
|
printenv | grep REACT_APP_ > /tmp/react_app_
|
||||||
npx --yes http-server -a 0.0.0.0 -P http://localhost:${PORT}? -p ${PORT} build
|
|
||||||
|
while IFS='=' read -r name value;
|
||||||
|
do
|
||||||
|
new_name=$(echo "$name" | sed "s/REACT_APP_/VITE_/g")
|
||||||
|
export "$new_name=$value"
|
||||||
|
done < /tmp/react_app_
|
||||||
|
|
||||||
|
printenv | grep VITE_ > /tmp/vite_
|
||||||
|
|
||||||
|
echo "window.env = {" > env.js
|
||||||
|
|
||||||
|
while IFS='=' read -r name value;
|
||||||
|
do
|
||||||
|
echo " \"$name\": \"$value\"," >> env.js
|
||||||
|
done < /tmp/vite_
|
||||||
|
|
||||||
|
echo "}" >> env.js
|
||||||
|
|
||||||
|
mv env.js ./dist/
|
||||||
|
|
||||||
|
# npx --yes react-inject-env set
|
||||||
|
npx --yes http-server -a 0.0.0.0 -P http://localhost:${PORT}? -p ${PORT} dist
|
||||||
|
|
|
||||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "azure-ipam-ui",
|
"name": "azure-ipam-ui",
|
||||||
"version": "1.1.0",
|
"version": "2.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@azure/msal-browser": "^2.37.0",
|
"@azure/msal-browser": "^2.37.0",
|
||||||
|
|
@ -26,15 +26,12 @@
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-redux": "^8.0.5",
|
"react-redux": "^8.0.5",
|
||||||
"react-router-dom": "^6.11.1",
|
"react-router-dom": "^6.11.1",
|
||||||
"react-scripts": "5.0.1",
|
|
||||||
"spinners-react": "^1.0.7",
|
"spinners-react": "^1.0.7",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"start": "vite",
|
||||||
"build": "react-scripts build",
|
"build": "vite build"
|
||||||
"test": "react-scripts test",
|
|
||||||
"eject": "react-scripts eject"
|
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": "react-app"
|
"extends": "react-app"
|
||||||
|
|
@ -52,7 +49,9 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-react": "^4.0.4",
|
||||||
"http-server": "^14.1.1",
|
"http-server": "^14.1.1",
|
||||||
"react-inject-env": "^2.1.0"
|
"react-inject-env": "^2.1.0",
|
||||||
|
"vite": "^4.4.9"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,7 @@ function Refresh() {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
React.useEffect(()=>{
|
React.useEffect(()=>{
|
||||||
const env = { ...process.env, ...window['env'] }
|
const env = { ...import.meta.env, ...window['env'] }
|
||||||
console.log("+++WEBSITE_DETAILS+++");
|
console.log("+++WEBSITE_DETAILS+++");
|
||||||
console.log(env);
|
console.log(env);
|
||||||
console.log("+++++++++++++++++++++");
|
console.log("+++++++++++++++++++++");
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
const AZURE_ENV = process.env.REACT_APP_AZURE_ENV || window['env'].REACT_APP_AZURE_ENV;
|
const AZURE_ENV = import.meta.env.VITE_AZURE_ENV || window['env'].VITE_AZURE_ENV;
|
||||||
|
|
||||||
const AZURE_ENV_MAP = {
|
const AZURE_ENV_MAP = {
|
||||||
AZURE_PUBLIC: {
|
AZURE_PUBLIC: {
|
||||||
|
|
@ -13,16 +13,16 @@ export const EXTERNAL_DESC_REGEX = "^(?![ /\._-])([a-zA-Z0-9 /\._-]){1,64}(?<![
|
||||||
|
|
||||||
export const CIDR_REGEX = "^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(/(3[0-2]|[1-2][0-9]|[0-9]))$";
|
export const CIDR_REGEX = "^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(/(3[0-2]|[1-2][0-9]|[0-9]))$";
|
||||||
|
|
||||||
export const UI_APP_ID = process.env.REACT_APP_UI_ID || window['env'].REACT_APP_UI_ID;
|
export const UI_APP_ID = import.meta.env.VITE_UI_ID || window['env'].VITE_UI_ID;
|
||||||
export const ENGINE_APP_ID = process.env.REACT_APP_ENGINE_ID || window['env'].REACT_APP_ENGINE_ID;
|
export const ENGINE_APP_ID = import.meta.env.VITE_ENGINE_ID || window['env'].VITE_ENGINE_ID;
|
||||||
export const TENANT_ID = process.env.REACT_APP_TENANT_ID || window['env'].REACT_APP_TENANT_ID;
|
export const TENANT_ID = import.meta.env.VITE_TENANT_ID || window['env'].VITE_TENANT_ID;
|
||||||
|
|
||||||
export const getEngineURL = () => {
|
export const getEngineURL = () => {
|
||||||
try {
|
try {
|
||||||
const engineURL = new URL(process.env.REACT_APP_IPAM_ENGINE_URL || window['env'].REACT_APP_IPAM_ENGINE_URL);
|
const engineURL = new URL(import.meta.env.VITE_IPAM_ENGINE_URL || window['env'].VITE_IPAM_ENGINE_URL);
|
||||||
|
|
||||||
return engineURL.origin;
|
return engineURL.origin;
|
||||||
} catch {
|
} catch {
|
||||||
return window.location.origin;
|
return window.location.origin;
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
return defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
server: {
|
||||||
|
// host: "0.0.0.0",
|
||||||
|
// port: 8080,
|
||||||
|
hmr: {
|
||||||
|
protocol: "ws",
|
||||||
|
path: "/ws"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
define: {
|
||||||
|
IPAM_VERSION: JSON.stringify(process.env.npm_package_version),
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
Загрузка…
Ссылка в новой задаче