build(docker): minimize production docker image size by using ubuntu:focal

This commit is contained in:
Amruth Pillai
2022-03-07 21:43:38 +01:00
parent c738f311da
commit b0a295d8bb
15 changed files with 91 additions and 44 deletions

View File

@ -1,7 +1,14 @@
{
"extends": ["../.eslintrc.json", "next/core-web-vitals"],
"ignorePatterns": [".next"],
"extends": [
"../.eslintrc.json",
"next/core-web-vitals"
],
"ignorePatterns": [
".next",
"__ENV.js"
],
"rules": {
"@next/next/no-img-element": "off"
"@next/next/no-img-element": "off",
"@next/next/no-sync-scripts": "off"
}
}
}

3
client/.gitignore vendored
View File

@ -34,3 +34,6 @@ yarn-error.log*
# typescript
*.tsbuildinfo
# react-env
__ENV.js

View File

@ -24,8 +24,6 @@ COPY --from=dependencies /app/node_modules ./node_modules
COPY --from=dependencies /app/schema/node_modules ./schema/node_modules
COPY --from=dependencies /app/client/node_modules ./client/node_modules
RUN [[ -e .env ]] && cp .env ./client/.env
RUN pnpm run build:schema
RUN pnpm run build:client

View File

@ -1,3 +1,4 @@
import env from '@beam-australia/react-env';
import { joiResolver } from '@hookform/resolvers/joi';
import { Google, Login, Visibility, VisibilityOff } from '@mui/icons-material';
import { Button, IconButton, InputAdornment, TextField } from '@mui/material';
@ -54,7 +55,7 @@ const LoginModal: React.FC = () => {
);
const { signIn } = useGoogleLogin({
clientId: process.env.googleClientId as string,
clientId: env('GOOGLE_CLIENT_ID'),
onSuccess: async (response: GoogleLoginResponse | GoogleLoginResponseOffline) => {
await loginWithGoogleMutation({ accessToken: (response as GoogleLoginResponse).accessToken });

View File

@ -7,15 +7,12 @@ const nextConfig = {
i18n,
images: {
domains: ['www.gravatar.com'],
},
env: {
appVersion: version,
appUrl: process.env.APP_URL,
serverUrl: process.env.SERVER_URL,
googleClientId: process.env.GOOGLE_CLIENT_ID,
},
images: {
domains: ['www.gravatar.com'],
},
// Hack to make Tailwind darkMode 'class' strategy with CSS Modules

View File

@ -1,12 +1,13 @@
{
"name": "@reactive-resume/client",
"scripts": {
"dev": "next dev",
"dev": "react-env --prefix PUBLIC -- next dev",
"build": "next build",
"start": "next start",
"start": "react-env --prefix PUBLIC -- next start",
"lint": "next lint --fix"
},
"dependencies": {
"@beam-australia/react-env": "^3.1.1",
"@emotion/css": "^11.7.1",
"@emotion/react": "^11.8.1",
"@emotion/styled": "^11.8.1",
@ -52,6 +53,7 @@
},
"devDependencies": {
"@babel/core": "^7.17.5",
"@reactive-resume/schema": "workspace:*",
"@types/downloadjs": "^1.4.3",
"@types/lodash": "^4.14.179",
"@types/node": "17.0.21",
@ -68,7 +70,6 @@
"prettier": "^2.5.1",
"sass": "^1.49.9",
"tailwindcss": "^3.0.23",
"typescript": "<4.6.0",
"@reactive-resume/schema": "workspace:*"
"typescript": "<4.6.0"
}
}

View File

@ -21,13 +21,15 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
<>
<Head>
<title>Reactive Resume</title>
<meta
name="description"
content="Reactive Resume is a free and open source resume builder that's built to make the mundane tasks of creating, updating and sharing your resume as easy as 1, 2, 3."
/>
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<script src="/__ENV.js" />
</Head>
<ReduxProvider store={store}>

View File

@ -1,3 +1,4 @@
import env from '@beam-australia/react-env';
import _axios, { AxiosError } from 'axios';
import Router from 'next/router';
@ -13,11 +14,11 @@ export type ServerError = {
};
const axios = _axios.create({
baseURL: `${process.env.serverUrl}/api`,
baseURL: `${env('SERVER_URL')}/api`,
});
export const uninterceptedAxios = _axios.create({
baseURL: `${process.env.serverUrl}/api`,
baseURL: `${env('SERVER_URL')}/api`,
});
axios.interceptors.request.use((config) => {