Deploying MFEs in the community

Working Groups Build-Test-Release
24

To make this more simple the answer is to merge the PRs. To merge the PRs, we need people to test it.
To test it, they need to go an extra mile to be able to deploy this before the PRs are merged. Its a catch 22.

One thing to notice is that although MFEs are the shiny new thing people want to see in the browser, they are still optional and are sitting behind 3 different feature flags. Not counting the 3 or more specific settings for CORS configuration and security. Smoothing this settings will require that some more experienced people test it first. The instructions I wrote above are meant for people who is already familiar with the project and is willing to test the feature to make it smoother in the future.

1 Like
25

We’re testing this with our automated deployment system (OCIM) as well, and have two tests running:

Both have standard users configured.

2 Likes
26

I just tried again without https and it worked, it is not mandatory to have https for the MFEs

What I did was similar to the usual installation guide for the community.
These where the steps that I ran:

export OPENEDX_RELEASE=nedbat/tk.1106c
wget https://raw.githubusercontent.com/edx/configuration/$OPENEDX_RELEASE/util/install/ansible-bootstrap.sh -O - | sudo -E bash
wget https://raw.githubusercontent.com/edx/configuration/$OPENEDX_RELEASE/util/install/generate-passwords.sh -O - | bash

Then I created a config.yml with this, probably we need to update the role and the native playbook to include some of these configurations by default

########################
# edxapp role settings #
########################

EDXAPP_LMS_BASE: "54.189.215.67"
EDXAPP_CMS_BASE: "54.189.215.67:18010"

EDXAPP_CROSS_DOMAIN_CSRF_COOKIE_DOMAIN: "54.189.215.67"
EDXAPP_CROSS_DOMAIN_CSRF_COOKIE_NAME: "cross-domain-cookie-mfe"

EDXAPP_CORS_ORIGIN_WHITELIST:
- 54.189.215.67:18010
- 54.189.215.67:19010

EDXAPP_CSRF_TRUSTED_ORIGINS:
- 54.189.215.67:19010


EDXAPP_LOGIN_REDIRECT_WHITELIST:
- 54.189.215.67:18010
- 54.189.215.67:19010

# Needed to link the LMS instructor dashboard to the writable gradebook micro-frontend
EDXAPP_LMS_WRITABLE_GRADEBOOK_URL: http://54.189.215.67:19010/gradebook

# Needed to link to the new profile micro-frontend.
EDXAPP_PROFILE_MICROFRONTEND_URL: http://54.189.215.67:19010/profile/u/

# Needed to link to the new account micro-frontend.
EDXAPP_ACCOUNT_MICROFRONTEND_URL: http://54.189.215.67:19010/account

EDXAPP_ENABLE_CORS_HEADERS: true
EDXAPP_ENABLE_CROSS_DOMAIN_CSRF_COOKIE: true

#####################
# mfe role settings #
#####################

MFE_DEPLOY_NGINX_PORT: 19010

# This will override the logo in the header with a dummy logo
MFE_NPM_OVERRIDES: ["@edx/frontend-component-header@git+https://github.com/edunext/frontend-component-header-edunext.git"]

# This 2 variables make the whole process select branches of the MFEs repos where the changes are applied:
# Will not be necessary once the following PRs have been merged:
# https://github.com/edx/frontend-app-gradebook/pull/145
# https://github.com/edx/frontend-app-account/pull/340
# https://github.com/edx/frontend-app-profile/pull/386
# A similar PR will be necessary for all mfes
MFE_DEPLOY_GIT_PATH: 'edunext'
MFE_DEPLOY_VERSION: 'lmm/build'

and then triggered the deployment with the custom configuration branch:

wget https://raw.githubusercontent.com/edunext/configuration/mfe/community_deployment/util/install/native.sh -O - | bash

Any of you can check that by going to

http://54.189.215.67:19010/profile/u/dummy
http://54.189.215.67:19010/account

and login with this credentials:
dummy@example.com

I put the MFE by default in the port 19010, but I have not changed the default value in the role, which is the value that we should use?

Other than that I will update the PR to enable
EDXAPP_ENABLE_CORS_HEADERS, EDXAPP_ENABLE_CROSS_DOMAIN_CSRF_COOKIE,
EDXAPP_ENABLE_CORS_HEADERS and EDXAPP_ENABLE_CROSS_DOMAIN_CSRF_COOKIE by default in the native installation.

I run that in ubuntu20.04.

Note: I had a problem with the CELERY_BROKER_PASSWORD, but I think that it was because I generated the my-passwords.yml file with OPENEDX_RELEASE=nedbat/tk.1106b instead of OPENEDX_RELEASE=nedbat/tk.1106c that has this important change:

Maybe you can use these steps to test the installation:

@BbrSofiane @regis @sambapete and @nedbat

As you can see, it is using a custom branding (the logo was overrided with this one https://github.com/eduNEXT/frontend-component-header-edunext/commit/656050af3a2437429071c81dd70987b43b5d2b20)

On the other hand, I have not added the waffle flags and the site configuration changes (they are only needed to enable the redirection to the MFE by default)

4 Likes
27

Thanks Luis. Following your instructions, I was able to install it and test it on my side on a new EC2 instance. Good job!

2 Likes
28

I tried the install and it works! I can access the profile page, the account page and the grade book (empty) page as expected.

3 Likes
29

The five PRs are now merged. Thanks to @morenol for authoring, and @djoy for reviewing and merging!

5 Likes