WebApp部署网站

小松很努力

于 2023-02-17 11:20:42 发布

阅读量798

点赞数

分类专栏： WebApp 文章标签： web app flask python azure microsoft

本文链接：https://blog.youkuaiyun.com/lisong315389/article/details/129078785

版权

WebApp 专栏收录该内容

1 篇文章

订阅专栏

WebApp部署

前提准备
代码部署
- 安装插件
- 代码方式部署网站
Docker（容器）部署
- 备注
Docker Compose（多容器）部署
- 备注

我们部署一个Project最直观的体现是部署一个网站,这里我们主要介绍一下web App部署网站的方式有哪些。

前提准备

1.我们部署网站的肯定需要源码工程，这里给大家准备了源码，可以直接拉取。
这里是一个python的flask项目可以直接克隆下来：
git clone https://github.com/Azure-Samples/msdocs-python-flask-webapp-quickstart
2.我们部署肯定需要一个Web App，这时候我们需要申请一个微软的Azure账号。然后我们登录 portal.azure.com 登录到Azure 门户。然后我们创建一个WebApp 。（备注：如果您为初学者，不要升级服务，不要绑定信用卡，用完Azure资源后及时删除，尤其是WebApp，消耗费用很高）
3.首先我们应该创建一个资源组。然后创建一个webapp，给定一个名称。发布方式列为代码，其他默认点击创建。
在这里插入图片描述
总结：我们代码拉下来之后，可以用编程工具打开项目工程，这里我们使用VS Code。
我们总共要介绍前两种部署方式，准确来说是三种，代码部署与容器部署

代码部署

安装插件

如果VsCode 是新安装的，则需要安装一些插件，我们可以直接点击下图的步骤，然后安装Azure Tools，里面包含了多项Azure服务工具包。安装好了之后最好重启VS Code，因为有时候刚安装完不会生效。
在这里插入图片描述

代码方式部署网站

我们用VS Code打开git clone下来的项目。接下来就是部署了。
1.我们点击Ctrl Shift + P 快捷键，输入Sign in，先登录一下我们的Azure账号。然后返回到我们的VS Code中，重新打开Ctrl Shift + P，然后输入deploy
在这里插入图片描述
3.我们选择部署在WebApp上，选择我们拉下来的项目进行部署。

4.接下来我们需要选择需要部署到的webapp,我们开始创建的“my-test-webappy” 在这里插入图片描述

5.最后我们可以看到部署完成，我们可以直接打开“Browse Website” 在这里插入图片描述

6.可以看到运行成功了，我们可以输入一个aa测试，是没问题的。
在这里插入图片描述

Docker（容器）部署

其实我们使用比较多的还是Docker打包镜像然后推到容器注册表进行部署，因为再结合DevOps的编译，会省去很多麻烦。

同样我们需要先创建一个用于容器部署的webapp。

2.接下来一步就是选择Docker镜像，我们可以先选择单一容器，也可以先创建一个容器注册表。这里后面可以通过Settings进行修改.

3.创建一个容器注册表

4.现在我们需要重新对项目做一些处理，打包成Docker镜像。
(1).首先我们需要生成一个requirements.txt文件，里面是我们所需要下载的以来，这里我们拉取的项目中自带，不用生成了。但是我们要稍微修改app.py文件里面的内容。
添加一下红色框里面的内容。

(2).生成一个Dockerfile其中的内容：
FROM python:3.8.10
COPY . /app/
WORKDIR /app
RUN pip install -r requirements.txt
EXPOSE 5000
CMD [“python”, “app.py”]
(3).这一步开始打包镜像（这里需要我们本地有Docker引擎）
然后在控制台中输入以下语句：
Docker build -t web .
web为我们的镜像名称

(4).完事以后我们可以用docker images 查看我们当前镜像
在这里插入图片描述
(5).接下来我们就需要将镜像推到Azure的容器注册表中啦。点击如下图中的docker标志

(6).然后点击我们的镜像找到我们刚刚创建的镜像。右键点击推送。

(7).接下来会让我们选择容器注册表。找到之前创建的容器注册表选中就完成啦。
在这里插入图片描述
5.我们推送完成后可以到Azure上看一下镜像是否在注册表中, 可以点开web查看, 我们可以看到标记以及修改时间都没问题。推送完成。

6. 现在我们可以修改一下配置，之前我们创建webapp时，我们选择了单一容器，这里我们可以修改一下。
(1).首先我们需要将容器注册表中，访问密钥->管理员用户打开，默认情况下是禁用的，禁用的话我们在配置webapp时选取不到镜像。
在这里插入图片描述
(2).接下来我们需要将注册表配置到webapp中,之后我们可以选择我们创建的镜像。

备注

(备注：如果没有docker的话也可以使用AzureCLI Build ,命令如下
az acr build -t webapptest2:v1 -r mywebapptest .
其中webapptest2为镜像名称
：v1为镜像的版本号用于版本控制
Mywebapptest 为注册表名称
在这里插入图片描述

我们来Azure上看一下没问题也推上来了

Docker Compose（多容器）部署

同样的我们现在需要建一个webapp.

2.下一步Docker配置：这里我们选择的是Docker Compose 预览镜像来源是DockerHub
这里我们是拉取的公共的镜像。
我们创建成功后转到部署中心
将他的镜像获取的YML文件写进去代码如下图：

version: '3.3'

services:
   wordpress:
     image: mcr.microsoft.com/azuredocs/multicontainerwordpress
     ports:
       - "8000:80"
     restart: always

   redis:
     image: mcr.microsoft.com/oss/bitnami/redis:6.0.8
     environment: 
      - ALLOW_EMPTY_PASSWORD=yes
     restart: always

在这里插入图片描述
4.
将获取代码写到Config中，然后点击保存。
之后我们在访问webapp的URL页面可以显示出来

备注

（备注：也可以使用Cloudshell进行部署：
1.我们打开Cloudshell 我们可以在里面新建资源组，存储账户等资源，之后输入：
git clone https://github.com/Azure-Samples/multicontainerwordpress
它会自动克隆下来我们的一个compose实例代码。
2.打开我们的项目目录
cd multicontainerwordpress
3. 使用Azure CLI创建一个应用服务计划，代码如下：

 az appservice plan create --name 【服务计划名称】--resource-group 【资源组名称】--sku S1 --is-linux

（如果在第一步时创建了资源组，可以直接使用）
4. 使用Azure CLI创建一个web App 代码如下：

az webapp create --resource-group myResourceGroup –plan 【上一步创建的计划名称】--name 【webapp名称】 --multicontainer-config-type compose --multicontainer-config-file compose-wordpress.yml

后面的.yml是我们克隆下来的文件。我这里克隆下来了可以来看一下目录结构：
在这里插入图片描述
5.然后我们直接访问Azure CLI创建的webapp的URL界面是没有问题的。

）