зеркало из 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
|
||||
build
|
||||
dist
|
||||
.dockerignore
|
||||
Dockerfile
|
||||
Dockerfile.prod
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ name: Azure IPAM Testing
|
|||
run-name: Azure IPAM Deployment & Testing
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ ipam-vite ]
|
||||
pull_request:
|
||||
branches: [ main ]
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
# syntax=docker/dockerfile:1
|
||||
FROM node:16-slim AS builder
|
||||
FROM node:18-slim AS builder
|
||||
|
||||
# Set Working Directory
|
||||
WORKDIR /app
|
||||
|
|
@ -41,7 +41,7 @@ RUN mkdir /var/run/sshd
|
|||
|
||||
# Install NodeJS 16.x
|
||||
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 apt install nodejs
|
||||
RUN npm install -g react-inject-env
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ version: '3.8'
|
|||
services:
|
||||
ipam-ui:
|
||||
environment:
|
||||
REACT_APP_AZURE_ENV: ${AZURE_ENV}
|
||||
REACT_APP_UI_ID: ${UI_APP_ID}
|
||||
REACT_APP_ENGINE_ID: ${ENGINE_APP_ID}
|
||||
REACT_APP_TENANT_ID: ${TENANT_ID}
|
||||
VITE_AZURE_ENV: ${AZURE_ENV}
|
||||
VITE_UI_ID: ${UI_APP_ID}
|
||||
VITE_ENGINE_ID: ${ENGINE_APP_ID}
|
||||
VITE_TENANT_ID: ${TENANT_ID}
|
||||
image: azureipam.azurecr.io/ipam-ui:latest
|
||||
ipam-engine:
|
||||
environment:
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ services:
|
|||
args:
|
||||
PORT: 8080
|
||||
environment:
|
||||
REACT_APP_AZURE_ENV: ${AZURE_ENV}
|
||||
REACT_APP_UI_ID: ${UI_APP_ID}
|
||||
REACT_APP_ENGINE_ID: ${ENGINE_APP_ID}
|
||||
REACT_APP_TENANT_ID: ${TENANT_ID}
|
||||
VITE_AZURE_ENV: ${AZURE_ENV}
|
||||
VITE_UI_ID: ${UI_APP_ID}
|
||||
VITE_ENGINE_ID: ${ENGINE_APP_ID}
|
||||
VITE_TENANT_ID: ${TENANT_ID}
|
||||
WDS_SOCKET_PORT: 3000
|
||||
volumes:
|
||||
- ./ui:/app
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ Azure IPAM is a lightweight solution developed on top of the Azure platform desi
|
|||
app = FastAPI(
|
||||
title = "Azure IPAM",
|
||||
description = description,
|
||||
version = "1.0.0",
|
||||
version = "2.0.0",
|
||||
contact = {
|
||||
"name": "Azure IPAM Team",
|
||||
"url": "https://github.com/azure/ipam",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
node_modules
|
||||
build
|
||||
dist
|
||||
.dockerignore
|
||||
Dockerfile.*
|
||||
*.example
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
# production
|
||||
/build
|
||||
/dist
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
ARG BASE_IMAGE=node:16-slim
|
||||
ARG BASE_IMAGE=node:18-slim
|
||||
FROM $BASE_IMAGE
|
||||
|
||||
ARG PORT=80
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
ARG VARIANT=16-bullseye
|
||||
ARG VARIANT=18-bullseye
|
||||
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:${VARIANT}
|
||||
|
||||
ARG PORT=3000
|
||||
|
|
@ -17,6 +17,9 @@ ENV PORT=$PORT
|
|||
COPY package.json ./
|
||||
COPY package-lock.json ./
|
||||
|
||||
# Upgrade NPM
|
||||
RUN npm install npm@latest -g
|
||||
|
||||
RUN npm install
|
||||
RUN chmod 777 node_modules
|
||||
|
||||
|
|
@ -27,4 +30,4 @@ COPY . ./
|
|||
EXPOSE $PORT
|
||||
|
||||
# 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
|
||||
|
||||
ARG PORT=8080
|
||||
|
|
|
|||
|
|
@ -2,30 +2,31 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<script type="text/javascript" src="%PUBLIC_URL%/env.js"></script>
|
||||
<!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
|
||||
<script type="text/javascript" src="/env.js"></script>
|
||||
<script type="module" src="/src/index.jsx"></script>
|
||||
<!-- <link rel="icon" href="/favicon.ico" /> -->
|
||||
<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="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
|
||||
<!-- <link rel="apple-touch-icon" href="/logo192.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
|
||||
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="%PUBLIC_URL%/site.webmanifest">
|
||||
<!-- <link rel="manifest" href="/manifest.json" /> -->
|
||||
<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.
|
||||
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.
|
||||
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}
|
||||
export REACT_APP_CONTAINER_IMAGE
|
||||
|
||||
npx --yes react-inject-env set
|
||||
npx --yes http-server -a 0.0.0.0 -P http://localhost:${PORT}? -p ${PORT} build
|
||||
printenv | grep REACT_APP_ > /tmp/react_app_
|
||||
|
||||
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",
|
||||
"version": "1.1.0",
|
||||
"version": "2.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@azure/msal-browser": "^2.37.0",
|
||||
|
|
@ -26,15 +26,12 @@
|
|||
"react-dom": "^18.2.0",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-router-dom": "^6.11.1",
|
||||
"react-scripts": "5.0.1",
|
||||
"spinners-react": "^1.0.7",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
"start": "vite",
|
||||
"build": "vite build"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
|
|
@ -52,7 +49,9 @@
|
|||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.0.4",
|
||||
"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(()=>{
|
||||
const env = { ...process.env, ...window['env'] }
|
||||
const env = { ...import.meta.env, ...window['env'] }
|
||||
console.log("+++WEBSITE_DETAILS+++");
|
||||
console.log(env);
|
||||
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 = {
|
||||
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 UI_APP_ID = process.env.REACT_APP_UI_ID || window['env'].REACT_APP_UI_ID;
|
||||
export const ENGINE_APP_ID = process.env.REACT_APP_ENGINE_ID || window['env'].REACT_APP_ENGINE_ID;
|
||||
export const TENANT_ID = process.env.REACT_APP_TENANT_ID || window['env'].REACT_APP_TENANT_ID;
|
||||
export const UI_APP_ID = import.meta.env.VITE_UI_ID || window['env'].VITE_UI_ID;
|
||||
export const ENGINE_APP_ID = import.meta.env.VITE_ENGINE_ID || window['env'].VITE_ENGINE_ID;
|
||||
export const TENANT_ID = import.meta.env.VITE_TENANT_ID || window['env'].VITE_TENANT_ID;
|
||||
|
||||
export const getEngineURL = () => {
|
||||
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;
|
||||
} catch {
|
||||
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),
|
||||
}
|
||||
})
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче