gcp vm静态ip_如何使用gcp云存储托管vue js静态网站

gcp vm静态ip

There are a number of ways you can build a website with Vue.js such as Java with Vue, NodeJS with Vue, NGINX serving Vue, etc. For the single-page applications, all you need to do is to load the initial index.html. Once you load the index.html the Vue library kicks in and do the rest of the job like loading component, calling API calls, etc. What if there are no backend calls and you want to build a static website with Vue.js?

您可以通过多种方式使用Vue.js构建网站，例如Java与Vue，NodeJS与Vue，NGINX服务Vue等。对于单页应用程序，您要做的就是加载初始索引。 html。 加载index.html之后，Vue库将启动，并完成其余工作，如加载组件，调用API调用等。如果没有后端调用，并且您想使用Vue.js构建静态网站怎么办？

GCP Cloud Storage is a globally unified, scalable, and highly durable object storage for developers and enterprises. We can configure a Cloud Storage bucket to host a static website for a domain you own. The index.html from the Vue UI can be placed in the bucket along with all the related HTML, CSS, and JavaScript files.

GCP Cloud Storage是面向开发人员和企业的全球统一，可扩展且高度耐用的对象存储。 我们可以配置一个Cloud Storage存储桶来托管您所拥有的域的静态网站。 Vue用户界面中的index.html可以与所有相关HTML，CSS和JavaScript文件一起放置在存储桶中。

• Why This Approach

  为什么采用这种方法

• Example Project

  示例项目

• Prerequisites

  先决条件

• Create a Bucket With Public Access

  创建具有公共访问权限的存储桶

• Build the Vue project With Relative Path

  使用相对路径构建Vue项目

• Upload and Test

  上传并测试

• Next Steps

  下一步

• Summary

  概要

• Conclusion

  结论

为什么采用这种方法(Why This Approach)

GCP Cloud Storage static web hosting gives you the ability to serve an entire website directly from it. You should consider this approach when

GCP Cloud Storage静态网络托管使您能够直接从中托管整个网站。 您应该在以下情况下考虑这种方法

• There is a lot of dynamic logic on the client-side instead of on the server-side.
  客户端而不是服务器端有很多动态逻辑。
• There are microservices in your project and you need to call those with CORS enabled.
  您的项目中有微服务，您需要调用那些启用了CORS的服务。
• Your website is simple such as Profile page
  您的网站很简单，例如“个人资料”页面
• Ideal for caching of read-mostly websites
  缓存只读网站的理想选择
• With Cloud CDN, You can distribute the content globally with less latency and improve the performance significantly.
  借助Cloud CDN，您可以以更少的延迟在全球范围内分发内容，并显着提高性能。

示例项目 (Example Project)

Here is an example project which we can put in the GCP Cloud Storage for static website hosting. This is a simple profile page with a header and some sections.

这是一个示例项目，我们可以将其放入GCP Cloud Storage中以进行静态网站托管。 这是一个简单的配置文件页面，其中包含标题和一些部分。

// clone the project
git clone https://github.com/bbachi/my-profile-vuejs.git// install dependencies and start the project
npm install
npm run serve

You can clone the project and run it on your machine. Here is the demonstration when you run it on your localhost and the port 8080.

您可以克隆项目并在计算机上运行它。 这是在本地主机和端口8080上运行时的演示。

Example Project 示例项目

先决条件(Prerequisites)

We need to create a Google Cloud Platform account from this URL. You can create an account and login to Cloud Console.

我们需要从该URL创建一个Google Cloud Platform帐户。 您可以创建一个帐户并登录到Cloud Console。

Create a project called StaticWeb-Test (You can name whatever you want).

创建一个名为StaticWeb-Test的项目(您可以随意命名)。

创建一个新项目 (Create a New Project)

Creating a New Project 创建一个新项目

Once the project is created you can view the project dashboard like below. You can see all the resources that you create under this project.

创建项目后，您可以如下所示查看项目仪表板。 您可以看到在此项目下创建的所有资源。

Project Dashboard 项目仪表板

创建一个计费帐户(Create a Billing Account)

You need to create a Billing Account by clicking on the Billing tab on the left navigation. For example, I created a Billing Account called Development Account

您需要通过点击左侧导航栏中的“结算”标签来创建一个结算帐户。 例如，我创建了一个名为“开发帐户”的结算帐户

Creating a Billing Account 创建一个计费帐户

You can see all the details of the Billing Account on the overview page

您可以在概述页面上查看计费帐户的所有详细信息

Billing Account Details 帐单帐户明细

将帐单帐户与此项目关联(Link Billing Account With this project)

We need to link this Billing Account called Development Account with this project as shown in the following figure. You can enable or disable billing at any time.

我们需要将这个名为“开发帐户”的计费帐户与此项目相关联，如下图所示。 您可以随时启用或禁用结算。

Linking Billing Account with Project 将帐单帐户与项目关联

创建具有公共访问权限的存储桶(Create a Bucket With Public Access)

The following are the series of steps that we need to follow in order to create a static website with GCP cloud storage.

以下是我们需要执行的一系列步骤，以使用GCP云存储创建静态网站。

创建一个桶 (Create a bucket)

Let’s create a bucket called staticvuejsweb and upload all the Vue code into the bucket.

让我们创建一个名为staticvuejsweb的存储桶，并将所有Vue代码上传到存储桶中。

Bucket Name 铲斗名称

We need to select a location where you store the data. If you want high availability you can select Multi-region. We can choose the Region for this article.

我们需要选择一个存储数据的位置。 如果要获得高可用性，可以选择“多区域”。 我们可以为本文选择地区。

Location Type 位置类型

We have four kinds of storage classes: Standard, Nearline, Coldline, and Archive for different use cases. We will just select Standard for this use case.

我们有四种存储类：针对不同用例的标准，近线，冷线和存档。 我们只会为此用例选择标准。

Standard Storage Class 标准存储等级

We need to select Access Control for our bucket. It is either Fine-grained or Uniform. To make individual objects in your bucket publicly accessible, you need to switch your bucket’s Access control mode to Fine-grained. Generally, making all files in your bucket publicly accessible is easier and faster.

我们需要为存储桶选择访问控制。 它可以是细粒度的或均匀的。 要使存储桶中的各个对象可公开访问，您需要将存储桶的访问控制模式切换为精细。 通常，使存储桶中的所有文件可公开访问更加容易和快捷。

Access Control 访问控制

Finally, we hit the button Create to create the bucket.

最后，我们点击创建按钮创建存储桶。

Bucket 桶

公开(Make it Public)

We have created a bucket and it’s time to make it public. Let’s click on the overflow button and click on Edit bucket permissions.

我们创建了一个存储桶，是时候将其公开。 让我们单击溢出按钮，然后单击“编辑存储桶权限”。

Edit bucket permissions 编辑存储桶权限

We need to add a member called allUsers with the role Storage Object Viewer and Allow Public Access to make it public.

我们需要添加一个名为allUsers的成员，其角色为Storage Object Viewer并允许Public Access使其公开。

Add Member 新增会员

Select a Role 选择一个角色

Allow Public Access 允许公共访问

After you have done the above steps you can actually see the Public access status as Public to internet

完成上述步骤后，您实际上可以看到“公共访问状态”为“对Internet公开”

Public Access 公共访问

使用相对路径构建Vue项目(Build the Vue project With Relative Path)

Let’s build the Vue project with the relative path of the bucket name. For example, we have a bucket name called staticvuejsweb so we have to build the Vue UI with this relative path.

让我们使用存储桶名称的相对路径构建Vue项目。 例如，我们有一个名为staticvuejsweb的存储桶名称，因此我们必须使用此相对路径来构建Vue UI。

This is because all the files uploaded to the cloud storage can be accessed with the bucket name prefix. All the js files, CSS files that are accessed in the index.html should have this relative path.

这是因为可以使用存储桶名称前缀访问上传到云存储的所有文件。 在index.html中访问的所有js文件和CSS文件都应具有此相对路径。

We need to add the following entry in the file called vue.config.js

我们需要在名为vue.config.js的文件中添加以下条目

module.exports = {
    publicPath: './staticvuejsweb',
    assetsDir: 'staticvuejsweb'
}

When we run the command npm run build it will add the relative path staticvuejsweb in the index.html.

当我们运行命令npm run build ，它将在index.html中添加相对路径staticvuejsweb 。

<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset=utf-8>
        <meta http-equiv=X-UA-Compatible content="IE=edge">
        <meta name=viewport content="width=device-width,initial-scale=1">
        <link rel=icon href=staticvuejsweb/favicon.ico>
        <title>my-profile-vuejs</title>
        <link href=staticvuejsweb/css/chunk-vendors.6a7c8892.css rel=preload as=style>
        <link href=staticvuejsweb/js/app.7f9872ec.js rel=preload as=script>
        <link href=staticvuejsweb/js/chunk-vendors.cd38095b.js rel=preload as=script>
        <link href=staticvuejsweb/css/chunk-vendors.6a7c8892.css rel=stylesheet>
    </head>
    <body>
        <noscript><strong>We're sorry but my-profile-vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
        <div id=app></div>
        <script src=staticvuejsweb/js/chunk-vendors.cd38095b.js></script>
        <script src=staticvuejsweb/js/app.7f9872ec.js></script>
    </body>
</html>

build files 建立档案

上传并测试(Upload and Test)

All the files under the dist folder should be uploaded into the bucket as below.

dist文件夹下的所有文件都应按以下方式上载到存储桶中。

Uploading Files 上载档案

Since we have all the objects with public access. Let’s copy the link of the index.html https://storage.googleapis.com/staticvuejsweb/index.html

既然我们所有对象都有公共访问权限。 让我们复制index.html https://storage.googleapis.com/staticvuejsweb/index.html的链接

URL 网址

Accessing the App in the browser 在浏览器中访问应用

下一步(Next Steps)

• You can clean up all the resources and buckets once you test it out
  测试完之后，您可以清理所有资源和存储桶

Deleting a Bucket 删除桶

• You can do all these steps with Google Cloud CLI as well. Here is the link about it. You can go ahead download and install it.

  您也可以使用Google Cloud CLI执行所有这些步骤。 这是关于它的链接。 您可以继续下载并安装它。

• If you have a domain name and you need to create a bucket name with the same name. For example, if your domain name is example.com you have to create a bucket name www.example.com

  如果您拥有域名，则需要创建一个具有相同名称的存储桶名称。 例如，如果您的域名是example.com，则必须创建存储桶名称www.example.com

• You can set index file and error pages with the following command with the help of CLI
  您可以在CLI的帮助下使用以下命令设置索引文件和错误页面

gsutil web set -m index.html -e 404.html gs://www.example.com

• To serve your website through HTTPS, you need an SSL certificate. This section shows you how to add your bucket to a load balancer’s backend and how to add a new Google-managed SSL certificate to the load balancer’s front end.

  要通过HTTPS服务您的网站，您需要SSL证书。 本部分介绍如何将存储桶添加到负载均衡器的后端，以及如何将新的Google管理的SSL证书添加到负载均衡器的前端。

• Go through this post for completing all the steps such as load balancing, SSL certificates, etc.

  查看这篇文章以完成所有步骤，例如负载平衡，SSL证书等。

• Here are some of the tips hosting a static website on GCP.

  以下是在GCP上托管静态网站的一些技巧。

• You can set up with Cloud CDN in front of the Cloud Storage to distribute the content globally with less latency.
  您可以将Cloud CDN设置在Cloud Storage的前面，以更少的延迟在全球分发内容。

概要 (Summary)

• There are a number of ways you can build a website with Vue such as Java with Vue, NodeJS with Vue, NGINX serving Vue, etc.
  您可以通过多种方式使用Vue构建网站，例如Java与Vue，NodeJS与Vue，NGINX服务Vue等。
• GCP Cloud Storage is a globally unified, scalable, and highly durable object storage for developers and enterprises.
  GCP Cloud Storage是面向开发人员和企业的全球统一，可扩展且高度耐用的对象存储。

• The index.html from the Vue UI can be placed in the bucket along with all the related HTML, CSS, and JavaScript files.

  Vue用户界面中的index.html可以与所有相关HTML，CSS和JavaScript文件一起放置在存储桶中。

• You need to create a GCP account, project, and enable a billing account on the project as prerequisites.
  您需要先创建一个GCP帐户，一个项目并在该项目上启用一个计费帐户。
• You can create the static website with the help of Console, Google Cloud CLI, SDK, and REST API.
  您可以在控制台，Google Cloud CLI，SDK和REST API的帮助下创建静态网站。
• You should build a Vue UI with the relative path as same as the bucket name.
  您应该使用相对路径与存储桶名称相同的方式构建Vue UI。

结论 (Conclusion)

GCP cloud storage is one of the options for static website hosting and we can even plugin API with Cloud Functions to get any API data or dynamic data. We will see those in future posts.

GCP云存储是静态网站托管的一种选择，我们甚至可以将API与Cloud Functions插入，以获取任何API数据或动态数据。 我们将在以后的帖子中看到这些内容。

翻译自: https://medium.com/bb-tutorials-and-thoughts/how-to-host-a-vue-js-static-website-with-gcp-cloud-storage-b8e87b89e4de

gcp vm静态ip