How to deploy a react app to Azure storage account ?

 For react application, we can host it on Azure storage account and then we can enable static web on it. 


Firstly, we create Storage account, in this part we take note: 

1. Region of storage account. 

2. Performance. 



Once storage account is created successfully, we enable static website and put index.html as index document name as below: 


After click SAVE button, we get URL for the static website. 

Example : https://xxxxxx.z23.web.core.windows.net/

OK, then we deploy code into storage accounts: 

For deployment, we need access key of storage account, 



Click on Storage accounts >> Settings >> Access Keys 

to get ConnectionString: 

For deployment we can use Jenkins, GitHub Action,.... In this topic I use GitHub Action for deployment, 

1. Create a deploy.yml file,


     deploy:
if: ${{ contains(github.ref, 'develop') }}
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [12.x]
steps:
- name: Checkout GitHub Action
uses: actions/checkout@v2
- name: Setup NodeJS ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: 'Deploy from ${{ github.ref }} branch'
run: |
yarn
yarn test:coverage
yarn build:prod
- name: 'deploy react app to storage'
uses: bacongobbler/azure-blob-storage-upload@v1.1.1
with:
source_dir: 'build'
container_name: '$web'
connection_string: ${{ secrets.ConnectionString }}

2. Upload deploy.yml file to .github/workflows


That's it ! 



Nhận xét

Bài đăng phổ biến từ blog này

Trang web medium.com chết, vì sao ?

Cách sử dụng sys.argv trong python.

Thiết kế một RESTful API bằng python và flask.