Closed ThienNguyen2002 closed 2 years ago
Move on to the next issue.
Go ahead and merge this branch to main
to move on. Great work finishing this section!
⚠️ If you receive a
Conflicts
error, simply pressResolve conflicts
and you should be good to merge!
Week 3 Step 1 ⬤◯◯◯◯◯◯◯◯ | 🕐 Estimated completion: 5-20 minutes
Blob Storage & Me
✅ Task:
bunnimage
blob access level
bunnimage-upload
with the HTTP trigger template and install NPM packagesparse-multipart
node-fetch
@azure/storage-blob
(install version 12.2.1)container_name
andstorage_account_connection_string
and commit your starter (template) function code tobunnimage-upload/index.js
on thebunnimage
branchAZURE_STORAGE_CONNECTION_STRING
bunnimage
tomain
, and merge when the bot approves!1. Creating a Blob Storage Account and its Resources
Azure Blob storage is solution that can store massive amounts of unstructured data, like text, images, or videos. Read more about it here!
A storage account provides a unique namespace in Azure for your data. Every object that you store in Azure Storage has an address that includes your unique account name. The combination of the account name and the Azure Storage blob endpoint forms the base address for the objects in your storage account.
❓ How do you create a Blob Storage Account
1. Navigate to your [Azure portal](https://portal.azure.com/#home). 2. In the Search Bar, search and click on "Storage accounts". ![image](https://user-images.githubusercontent.com/49426183/119739490-2b11d600-be37-11eb-8f7c-09faaf4b14b5.png) 3. Click on "Create storage account". ![image](https://user-images.githubusercontent.com/49426183/119739652-62808280-be37-11eb-90c4-9ca17e89e60e.png) 4. Fill out the storage account details like below, and click "Review + create". ![image](https://user-images.githubusercontent.com/49426183/119739390-03bb0900-be37-11eb-8b5c-49fa68035c73.png) 5. Click "Create". ![image](https://user-images.githubusercontent.com/49426183/119739970-eb97b980-be37-11eb-8c85-80691d285e95.png) 6. Wait for the screen to display "Your deployment is complete". Click "Go to resource". You're ready to create your Blob Storage container! ![image](https://user-images.githubusercontent.com/49426183/119740051-0f5aff80-be38-11eb-956c-59beeaa63b7d.png)❓ How do you access your Azure Blob Storage account access key
1. Navigate to your storage account page. 2. On the left hand bar, click on Security + networking > Access Keys. ![image](https://user-images.githubusercontent.com/49426183/119740903-8fce3000-be39-11eb-9933-6383d2af0f9e.png) 3. Click "Show keys", and you can copy *one* of the connection strings' information.❓ How do you create a Blob Storage Container!
1. Make sure you're on your storage account page in the Azure portal. 2. In the left menu for the storage account, scroll to the Data storage section, then select Containers. ![](https://user-images.githubusercontent.com/49426183/119740347-9f994480-be38-11eb-9d48-3381144fcf8f.PNG) 3. Select the + Container button. ![](https://user-images.githubusercontent.com/49426183/119740424-bdff4000-be38-11eb-8037-dd18adf72140.PNG) 4. Type a name for your new container. The container name must be lowercase, must start with a letter or number, and can include only letters, numbers, and the dash (-) character. 5. Set the level of public access to the container to "Blob (anonymous read access for blobs only)". ![image](https://user-images.githubusercontent.com/69332964/122659042-7ae77280-d141-11eb-8fcd-0f8b15fcafa3.png) 6. Select Create to create the container.2: Creating an HTTP Trigger Function and Installing Required Packages:
Create a new HTTP trigger function named
bunnimage-upload
(no need to edit the code yet). Feel free to navigate to the previous issues/steps for guidance if you need extra help.Before we start coding the trigger, we need to install the following
npm
packages/libraries in the Function App we created in the previous step:parse-multipart
node-fetch@2
@azure/storage-blob
:question: How do I install `npm` packages?
Click on the "Console" tab in the left panel under "Development Tools". ![https://user-images.githubusercontent.com/69332964/99189070-59e31d00-272d-11eb-80a4-17444e5fac65.png](https://user-images.githubusercontent.com/69332964/99189070-59e31d00-272d-11eb-80a4-17444e5fac65.png) Inside the console (shown on the right panel), type in the following commands: `npm init -y`[`npm install parse-multipart`](https://www.npmjs.com/package/parse-multipart)
[`npm install node-fetch@2`](https://www.npmjs.com/package/node-fetch)
[`npm install @azure/storage-blob`](https://www.npmjs.com/package/@azure/storage-blob)
📹 Walkthrough Video