Background of 0.

In the WordPress series, I showed you how to start the OAuth2 service in WordPress and created a simple HTML page to verify that OAuth works.

However, a pure HTML +javascript web page, after all, is quite limited in its ability to present more functionality. So, how do we deploy an H5 App (this article uses React as an example) and WordPress under a Gateway?

Demo Repo address: gitlab.com/yafeya/reac…

1. Docker-Composestructure

Docker-compose has the same structure as the docker-compose application mentioned in the previous article, except that a React App is deployed in the Volume folder of WordPress.

2. ReactThe change in

React supports sub-Folders in the following ways:

2.1 to modifyPUBLIC_URL

Because I’m using create-react-app to create the react application, I rely on the PUBLIC_URL environment variable. In public/index.html, the reference to PUBLIC_URL is as follows. If PUBLIC_URL had been string. Empty before we changed PUBLIC_URL, the site would have looked for static resources in the gateway’s absolute path, which would have returned a 404 error.

Therefore, we need to make the following modifications:

# .env
The default value of # REACT_APP_SUB_DIR is undefined
REACT_APP_API_BASEURL=http://yafeya.com
REACT_APP_SUB_DIR=

# .env.production
# PUBLIC_URL set to the current path
REACT_APP_API_BASEURL=http://yafeya-production.com
PUBLIC_URL=.
REACT_APP_SUB_DIR=wp-react-dashboard
Copy the code

Set PUBLIC_URL to. /favicon.ico,./logo192.png,./manifest.json./favicon.ico,./logo192.png,./manifest.json.

2.2 to modifybundleRelative position of

Since we used the router and code-split, we need to specify the basename of the router as the sub-Folder name so that we can routing to the corresponding bundle.

// Router/Router.tsx

import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
import { Home } from ".. /Home/Home";
import { Redux } from ".. /Redux/Redux";
import { ItemDetailWrapper } from ".. /ItemDetail/Item";
import { lazy, Suspense } from "react";


const TranslationWrapper = lazy(() = > import(".. /i18n/translation"));
const ItemsWrapper = lazy(() = > import(".. /ItemList/ItemList"));

export const Router = () = > {
    // Use dotenv to get REACT_APP_SUB_DIR, the environment variable we defined in.env.production
    let subdir = process.env.REACT_APP_SUB_DIR;
    return (
        // basename is set to sub-folder
        <BrowserRouter basename={subdir}> 
            <Suspense fallback={<div>loading...</div>} ><Switch>
                    <Route exact={true} path="/" component={Home} />
                    <Route path="/redux" component={Redux} />
                    <Route path="/items" component={ItemsWrapper} />
                    <Route path="/item/:id" component={ItemDetailWrapper} />
                    <Route path="/i18n" component={TranslationWrapper} />
                    <Route component={()= > <Redirect to="/" />} / ></Switch>
            </Suspense>
        </BrowserRouter> 
    );
}
Copy the code

The React application only needs to change the following points, nothing more.

3. NginxThe change in

You need to add the location routing rule corresponding to React to nginx.conf.

server { # ... #... location /wp-react-dashboard { try_files $uri $uri/ /wp-react-dashboard/index.html; index index.html; }}Copy the code

Restart Docker-compose and you can access the React App under the Sub-Folder at https://your-gateway-domain/wp-react-dashboard.

docker-compose down && docker-compose up -d
Copy the code

4. Operation effect