From 59f1389c6023be8ec1435f8f7e55d7de5a302b5b Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Mon, 8 Mar 2021 22:37:08 +0100 Subject: sync translated content --- files/fr/_redirects.txt | 1 + files/fr/_wikihistory.json | 16 +- .../orphaned/web/mathml/element/mglyph/index.html | 71 ++++++ files/fr/web/mathml/element/mglyph/index.html | 70 ------ files/ja/_redirects.txt | 1 + files/ja/_wikihistory.json | 12 +- .../installing_on_pws_cloud_foundry/index.html | 242 -------------------- .../installing_on_pws_cloud_foundry/index.html | 243 +++++++++++++++++++++ files/pt-pt/_redirects.txt | 2 + files/pt-pt/_wikihistory.json | 24 +- .../orphaned/web/mathml/element/mglyph/index.html | 73 +++++++ .../web/mathml/element/mlabeledtr/index.html | 100 +++++++++ files/pt-pt/web/mathml/element/mglyph/index.html | 72 ------ .../pt-pt/web/mathml/element/mlabeledtr/index.html | 99 --------- files/ru/_redirects.txt | 1 + files/ru/_wikihistory.json | 12 +- .../orphaned/web/mathml/element/mglyph/index.html | 72 ++++++ files/ru/web/mathml/element/mglyph/index.html | 71 ------ files/tr/_redirects.txt | 1 + files/tr/_wikihistory.json | 12 +- .../selectors/box_model_tasks/index.html | 86 -------- .../selectors/box_model_tasks/index.html | 87 ++++++++ files/zh-cn/_redirects.txt | 2 + files/zh-cn/_wikihistory.json | 30 +-- .../conflicting/web/api/beacon_api/index.html | 105 +++++++++ .../installing_on_pws_cloud_foundry/index.html | 242 -------------------- .../installing_on_pws_cloud_foundry/index.html | 243 +++++++++++++++++++++ .../api/beacon_api/using_the_beacon_api/index.html | 104 --------- 28 files changed, 1055 insertions(+), 1039 deletions(-) create mode 100644 files/fr/orphaned/web/mathml/element/mglyph/index.html delete mode 100644 files/fr/web/mathml/element/mglyph/index.html delete mode 100644 files/ja/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html create mode 100644 files/ja/orphaned/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html create mode 100644 files/pt-pt/orphaned/web/mathml/element/mglyph/index.html create mode 100644 files/pt-pt/orphaned/web/mathml/element/mlabeledtr/index.html delete mode 100644 files/pt-pt/web/mathml/element/mglyph/index.html delete mode 100644 files/pt-pt/web/mathml/element/mlabeledtr/index.html create mode 100644 files/ru/orphaned/web/mathml/element/mglyph/index.html delete mode 100644 files/ru/web/mathml/element/mglyph/index.html delete mode 100644 files/tr/learn/css/building_blocks/selectors/box_model_tasks/index.html create mode 100644 files/tr/orphaned/learn/css/building_blocks/selectors/box_model_tasks/index.html create mode 100644 files/zh-cn/conflicting/web/api/beacon_api/index.html delete mode 100644 files/zh-cn/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html create mode 100644 files/zh-cn/orphaned/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html delete mode 100644 files/zh-cn/web/api/beacon_api/using_the_beacon_api/index.html diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index e21e5b5602..71050031ab 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -5650,6 +5650,7 @@ /fr/docs/Web/JavaScript/décoder_encoder_en_base64 /fr/docs/Glossary/Base64 /fr/docs/Web/JavaScript/guide_de_demarrage /fr/docs/conflicting/Learn/Getting_started_with_the_web/JavaScript_basics /fr/docs/Web/MathML/Attribute/Valeurs /fr/docs/Web/MathML/Attribute/Values +/fr/docs/Web/MathML/Element/mglyph /fr/docs/orphaned/Web/MathML/Element/mglyph /fr/docs/Web/MathML/Exemples /fr/docs/Web/MathML/Examples /fr/docs/Web/MathML/Exemples/Dériver_la_Formule_Quadratique /fr/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula /fr/docs/Web/MathML/Exemples/MathML_Theoreme_de_Pythagore /fr/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index 3b1152e3c9..772741df2f 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -24522,14 +24522,6 @@ "SphinxKnight" ] }, - "Web/MathML/Element/mglyph": { - "modified": "2020-10-15T21:23:58.877Z", - "contributors": [ - "SphinxKnight", - "Delapouite", - "Goofy" - ] - }, "Web/MathML/Element/mi": { "modified": "2019-03-23T23:29:00.435Z", "contributors": [ @@ -46002,5 +45994,13 @@ "SphinxKnight", "MasterFox" ] + }, + "orphaned/Web/MathML/Element/mglyph": { + "modified": "2020-10-15T21:23:58.877Z", + "contributors": [ + "SphinxKnight", + "Delapouite", + "Goofy" + ] } } \ No newline at end of file diff --git a/files/fr/orphaned/web/mathml/element/mglyph/index.html b/files/fr/orphaned/web/mathml/element/mglyph/index.html new file mode 100644 index 0000000000..b4785ad676 --- /dev/null +++ b/files/fr/orphaned/web/mathml/element/mglyph/index.html @@ -0,0 +1,71 @@ +--- +title: +slug: orphaned/Web/MathML/Element/mglyph +tags: + - Element + - MathML + - Reference +translation_of: Web/MathML/Element/mglyph +original_slug: Web/MathML/Element/mglyph +--- +
{{MathMLRef}}
+ +

L'élément MathML <mglyph> est utilisé afin d'afficher des symboles non-standards n'ayant pas de caractères Unicode correspondants. Cet élément peut être utilisé avec les éléments jetons.

+ +

Attributs

+ +
+
alt
+
Cet attribut définit le texte alternatif décrivant l'image. Ce texte sera affiché si l'URL est incorrecte, si le format de l'image n'est pas supporté ou jusqu'à la fin du téléchargement de l'image.
+
class, id, style
+
Afin d'être utilisés avec les feuilles de styles.
+
height
+
La hauteur de l'image.
+
href
+
Un hyperlien pointant vers un URI donné.
+
mathbackground
+
La couleur de fond. Il est possible d'utiliser les codes au format #rgb, #rrggbb et les noms de couleurs HTML.
+
src
+
L'URL de l'image.
+
valign
+
Définit l'alignement vertical par rapport à la ligne de base courante.
+
width
+
La largeur de l'image.
+
+ +

Exemples

+ +
<math>
+  <mi><mglyph src="mon-glyphe.png" alt="mon glyphe"/></mi>
+</math>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaires
{{ SpecName('MathML3', 'chapter3.html#presm.mglyph', 'mglyph') }}{{ Spec2('MathML3') }}Spécification actuelle
{{ SpecName('MathML2', 'chapter3.html#presm.mglyph', 'mglyph') }}{{ Spec2('MathML2') }}Spécification initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("mathml.elements.mglyph")}}

diff --git a/files/fr/web/mathml/element/mglyph/index.html b/files/fr/web/mathml/element/mglyph/index.html deleted file mode 100644 index e19c07131f..0000000000 --- a/files/fr/web/mathml/element/mglyph/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: -slug: Web/MathML/Element/mglyph -tags: - - Element - - MathML - - Reference -translation_of: Web/MathML/Element/mglyph ---- -
{{MathMLRef}}
- -

L'élément MathML <mglyph> est utilisé afin d'afficher des symboles non-standards n'ayant pas de caractères Unicode correspondants. Cet élément peut être utilisé avec les éléments jetons.

- -

Attributs

- -
-
alt
-
Cet attribut définit le texte alternatif décrivant l'image. Ce texte sera affiché si l'URL est incorrecte, si le format de l'image n'est pas supporté ou jusqu'à la fin du téléchargement de l'image.
-
class, id, style
-
Afin d'être utilisés avec les feuilles de styles.
-
height
-
La hauteur de l'image.
-
href
-
Un hyperlien pointant vers un URI donné.
-
mathbackground
-
La couleur de fond. Il est possible d'utiliser les codes au format #rgb, #rrggbb et les noms de couleurs HTML.
-
src
-
L'URL de l'image.
-
valign
-
Définit l'alignement vertical par rapport à la ligne de base courante.
-
width
-
La largeur de l'image.
-
- -

Exemples

- -
<math>
-  <mi><mglyph src="mon-glyphe.png" alt="mon glyphe"/></mi>
-</math>
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{ SpecName('MathML3', 'chapter3.html#presm.mglyph', 'mglyph') }}{{ Spec2('MathML3') }}Spécification actuelle
{{ SpecName('MathML2', 'chapter3.html#presm.mglyph', 'mglyph') }}{{ Spec2('MathML2') }}Spécification initiale
- -

Compatibilité des navigateurs

- - - -

{{Compat("mathml.elements.mglyph")}}

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 809e0a1892..bd643a098e 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -3223,6 +3223,7 @@ /ja/docs/Learn/JavaScript/Objects/継承 /ja/docs/Learn/JavaScript/Objects/Inheritance /ja/docs/Learn/JavaScript/非同期 /ja/docs/Learn/JavaScript/Asynchronous /ja/docs/Learn/Performance/Populating_the_page:_how_browsers_work /ja/docs/Web/Performance/How_browsers_work +/ja/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry /ja/docs/orphaned/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry /ja/docs/Link_prefetching_FAQ /ja/docs/Web/HTTP/Link_prefetching_FAQ /ja/docs/Localization /ja/docs/Glossary/Localization /ja/docs/Localizing_extension_descriptions /ja/docs/orphaned/Localizing_extension_descriptions diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 2e54f8c7f8..d03b74e894 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -5421,12 +5421,6 @@ "silverskyvicto" ] }, - "Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry": { - "modified": "2020-07-16T22:38:52.544Z", - "contributors": [ - "silverskyvicto" - ] - }, "Learn/Server-side/Express_Nodejs/Introduction": { "modified": "2020-07-16T22:38:10.974Z", "contributors": [ @@ -53496,5 +53490,11 @@ "contributors": [ "eltociear" ] + }, + "orphaned/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry": { + "modified": "2020-07-16T22:38:52.544Z", + "contributors": [ + "silverskyvicto" + ] } } \ No newline at end of file diff --git a/files/ja/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html b/files/ja/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html deleted file mode 100644 index f3a62d8b6e..0000000000 --- a/files/ja/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: PWS/Cloud Foundry に LocalLibrary をインストールする -slug: Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry -translation_of: Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry ---- -
{{LearnSidebar}}
- -

この記事では Pivotal Web Services の PaaS クラウドに地域図書館をインストールする方法の実際的なデモンストレーションを提供します。これは、チュートリアルのパート7で使用されている PaaS クラウドサービスである Heroku のフル機能のオープンソース代替です。PWS/Cloud Foundry は、Heroku (または別の PaaS クラウドサービス) に代わるものを探している場合、または単に何か違うことを試したい場合には、絶対にチェックする価値があります。

- -

Why PWS?

- -

Pivotal Web Services is a public instance of the Open Source Cloud Foundry Platform. It is a polyglot platform supporting many different languages including Node.js, Java, PHP, Python, Staticfiles, and Ruby. It has a introductory free trial and is incredibly efficient for running Node applications! As Node and Express are open source projects, there is consistency with working with an open deployment platform such as Cloud Foundry. You can get under the hood and see how an application is hosted.

- -

There are multiple reasons to use PWS!

- -
    -
  • PWS has a flexible pricing that is extremely well tuned for small runtimes such as node. It's possible to run a redundant pair of your app for less than $5 per month. That includes a standby failover system to take over running your app if the main server fails at any point.
    • -
  • As a PaaS, PWS takes care of a lot of the web infrastructure for us. This makes it much easier to get started, because you don't worry about servers, load balancers, reverse proxies, restarting your website on a crash, or any of the other web infrastructure that PWS provides for us under the hood.
    • -
  • Because PWS is using Cloud Foundry, an open platform. You can therefore easily deploy your application to other Cloud Foundry providers such as IBM BlueMix, AnyNines and Swisscomm Application Cloud. The below instructions will work with any standard Cloud Foundry deployment with minor modifications.
    • -
  • While it does have some limitations, these will not affect this particular application. For example: -
      -
    • PWS and Cloud Foundry provide only short-lived storage so user-uploaded files cannot safely be stored on PWS itself.
      • -
    • The free trial is good for a year and only up to $87 of app usage. For a typical Node app that means you can run an app for an entire year.
      • -
    -
    • -
  • Mostly it just works, and if you end up loving it and want to upgrade, scaling your app is very easy.
    • -
  • PWS and other Cloud Foundry applications are used for production apps. 
    • -
- -

How does PWS work?

- -

PWS runs websites and applications using containers and has been for many years. Cloud Foundry started using a container technology called Warden and is now using a container system called Garden. These are very similar to the popular Docker container and in fact, many installations of Cloud Foundry support deploying Docker containers.

- -

One of the advantages of using Cloud Foundry is that you do not need to create the container spec, as Cloud Foundry's buildpacks will manufacture them based on the latest components. Apps on Cloud Foundry should follow 12 Factor guidelines as the containers deployed are ephemeral and may be cleaned up at anytime and redeployed somewhere else in the cloud. This ensures that your apps and platform have the latest software. An application can consist of multiple instances where the application is placed into redundant containers that enable high availability of your app. Cloud Foundry will automatically handle all the load balancing between identical instances. This allows you to scale your application for performance and availability

- -

Since the file system is ephemeral any temporary storage or services should be located elsewhere using backing services. This can be done using marketplace services available on different providers or by bringing your own via User Provided Services.

- -

What do we cover below?

- -

This post covers how to modify the LocalLibrary application from the tutorial for deployment on PWS and Cloud Foundry. In doing so, it covers the basics of deploying any node.js application to PWS with the following steps.

- -
    -
  • Configuring the package.json file to run with the engines available on PWS.
    • -
  • Adding and installing the 'cfenv' node module to make working with services easier.
    • -
  • Using the cfenv module to connect to a MongoDB instance from mLab that was created and bound using the PWS marketplace.
    • -
  • Using the cf CLI tool to create a new mongoDB service instance and bind it to the local library application.
    • -
  • How to set environment variables for Node using the cf CLI.
    • -
  • How to look at logs, again using the cf CLI tool.
    • -
- -

So let's get started. You have two options, you can go through the tutorial from the beginning or you can just download the completed project and modify it from there for use on PWS. To do the latter, you can do the following from a terminal:

- -
git clone https://github.com/mdn/express-locallibrary-tutorial
- -

You'll then need to follow the preparation steps listed in the Getting your website ready to publish section of Express Tutorial Part 7: Deploying to production, before then following the steps listed below.

- -
-

Note: This work flow is based on the Mozilla Heroku work flow in the main Express/Node tutorial series for consistency, to help readers compare and contrast. 

-
- -

Modifying the LocalLibrary for PWS

- -

Deployment of a Node application on Cloud Foundry takes the following steps. Using the downloaded 'cf' CLI tool on your environment, your source code and supporting metadata files are uploaded to Cloud Foundry which will assemble and package the components of your application. Note that your files need to be located on your system to deploy or as a zip archive somewhere accessible on the internet. We'll assume the former.

- -

This means, no assumptions about which source control system is used. As long as you have a complete source tree in your local file system you can deploy the app. There are some things you have to make available to ensure the correctly assembly of your Node application. First Cloud Foundry cf CLI will look for the presence of the 'package.json' file to determine the dependencies and download the necessary components. The rules of this assembly are defined in Cloud Foundry's nodejs buildpack. An optional cloud foundry manifest file can specify information about your application such as name, size and start command if non-standard. In addition to deploying the application, the cf CLI tool can also configure services, set environment variables and view logs. That's all the overview you need in order to get started (see Getting Started on Pivotal Web Services for a more comprehensive guide). Let's start making the changes so you'll need to deploy the LocalLibrary application to  PWS.

- -

Set node version

- -

The package.json contains everything needed to work out your application dependencies and what file should be launched to start your site. Cloud Foundry and PWS detects the presence of this file, and will use it to provision your app environment. The only useful information missing in our current package.json is the version of node. We can find the version of node we're using for development by entering the command:

- -
node --version
-# will return version e.g. v6.10.3
- -

Open package.json with a text editor, and add this information as an engines > node section as shown (using the version number retrieved above).

- -
{
-  "name": "express-locallibrary-tutorial",
-  "version": "0.0.0",
-  "engines": {
-    "node": "6.10.3"
-  },
-  "private": true,
-  ...
-
- -

Database configuration

- -

So far in this tutorial we've used a single database that is hard coded into the app.js file. Normally we'd like to be able to have a different database for production and development, so next we'll modify the LocalLibrary website to get the database URI from the OS environment, and otherwise use our development database that we added manually earlier. Cloud Foundry has a very flexible services model that enables multiple services of the same type to exist in the environment. It stores all services related configurations in a single parseable JSON object called VCAP_SERVICES. A typical VCAP_SERVICES variable looks like this:

- -
{
- "VCAP_SERVICES": {
-  "mlab": [
-   {
-    "credentials": {
-     "uri": "mongodb://CloudFoundry_test_dev:somecr8zypassw0rd@dbhost.mlab.com:57971/CloudFoundry_dbname"
-    },
-    "label": "mlab",
-    "name": "node-express-tutorial-mongodb",
-    "plan": "sandbox",
-    "provider": null,
-    "syslog_drain_url": null,
-    "tags": [
-     "Cloud Databases",
-     "Developer Tools",
-     "Web-based",
-     "Data Store",
-    ],
-    "volume_mounts": []
-   }
-  ]
- }
-}
-
-
- -

Writing the code to extract and parse this environment variable is not hard, but it doesn't add a lot of value when others have written libraries to do this. In this case, there is a node.js package we can use called cfenv.

- -

This will download the cfenv module and its dependencies, and modify the package.json file as required. Open app.js and find the block with all the 'requires' that load the modules into your application. In this example look for the line that looks something like this:

- -
var expressValidator = require('express-validator');
- -

If you cannot find that exact line, look for the blocks of 'requires' and look for the last one. Add the following text after it:

- -
var cfenv = require('cfenv');
- -
    -
  1. -

    To install the package, go to your terminal and make sure you are in the directory where the package.json file for LocalLibrary is. From the command line, type:

    - - 
    npm install cfenv
    -
    2. -
  2. -

    Now that you have loaded the module, this next line will instantiate an object that will contain the app and services information required for deployment. Add the following after the line that contains app.use(helmet());

    - - 
    // Set up CF environment variables
-var appEnv = cfenv.getAppEnv();
-
    - -

    When this line executes, all the Cloud Foundry application environment information will become available to the application in the appEnv object.

    -
    3. -
  3. -

    Now it is time to update the application to use the database configured by the platform. Find the line that sets the mongoDB connection variable. It will look something like this:

    - - 
    var mongoDB = process.env.MONGODB_URI || dev_db_url;
    -
    4. -
  4. -

    You will now modify the line with the following code  appEnv.getServiceURL('node-express-tutorial-mongodb') to get the connection string from an environment variable that is being managed by the cfenv  module. If no service has been created and bound it will use your own database URL you created as part of the tutorial instead of the one from the environment. So replace the line above with the following:

    - - 
    var mongoDB = appEnv.getServiceURL('node-express-tutorial-mongodb') || dev_db_url;
-
    -
    5. -
  5. -

    Now run the site locally (see Testing the routes for the relevant commands) and check that the site still behaves as you expect. At this point your app is ready to use with Cloud Foundry and Pivotal Web Services.

    -
    6. -
- -

Get a Pivotal Web Services account

- -

To start using Pivotal Web Services you will first need to create an account (skip ahead to Create and upload the website if you've already got an account and have already installed the PWS cf CLI client).

- -
    -
  • Go to https://run.pivotal.io and click the SIGN UP FOR FREE button.
    • -
  • Enter your details and then press CREATE FREE ACCOUNT. You'll be asked to check your email for a sign-up email.
    • -
  • Click the account activation link in the signup email. You'll be taken back to your account on the web browser and you will complete the registration.
    • -
  • You will set your password and go through the rest of the new user sign up and how to claim your free trial account. Note you need a mobile phone to confirm your account. You will receive an "org" account funded with $87 of application usage credit. Note your email account can be in multiple orgs on PWS. This is similar to your user account on services like GitHub.
    • -
  • Go to https://console.run.pivotal.io and login in. You'll then be logged in and taken to the PWS dashboard: https://console.run.pivotal.io.
    • -
- -

Install the cf CLI client

- -

The cf CLI client is a software tool for managing and deploying your application. Download and install the PWS cf CLI client by following the instructions on Pivotal Web Services or downloading directly from GIthub. Be sure to download the correct version for your computer. After the client is installed you will be able run commands, for example to get help on the client:

- -
cf help
-
- -

We'll now go through the steps to login to PWS using the CLI and deploy — or in Cloud Foundry parlance "push" your app.

- -

Create and upload the website

- -

To create the app we navigate to the directory where our modified files are. This is the same directory where the LocalLibrary package.json file is located. First, let's tell the cf CLI which Cloud Foundry instance you want to use. We need to do this, since the cf CLI tool can be used with any standard Cloud Foundry system, so this command indicates which specific Cloud Foundry you are using. Enter the following terminal command now:

- -
cf api api.run.pivotal.io
- -

Next login using the following command (enter your email and password when prompted):

- -
cf login
-Email: enter your email
-Password: enter your password
- -

We can now push our app to PWS. In the below example. replace 'some-unique-name' with something you can remember that is likely to be unique. If it isn't unique, the system will let you know. The reason this name has to be unique to the PWS system is it is the address we will use to to access your LocalLibrary application. I used mozilla-express-tutorial-xyzzy. You should use something else.

- -
cf push some-unique-name -m 256MB
- -

Note the -m flag we added is not required. We just included it so that we only use 256MB of memory to run the app. Node apps typically can run in 128 MB, but we are being safe. If we didn't specify the memory, the CLI would use the default 1 GB of memory, but we want to make sure your trial lasts longer. You should now see a bunch of text on the screen. It will indicate that the CLI is uploading all your files, that it's using the node buildpack, and it will start the app. If we're lucky, the app is now "running" on the site at the URL https://some-unique-name.cfapps.io. Open your browser and run the new website by going to that URL.

- -
Note: The site will be running using our hardcoded development database at this time. Create some books and other objects, and check out whether the site is behaving as you expect. In the next section we'll set it to use our new database.
- -

Setting configuration variables

- -

You will recall from a preceding section that we need to set NODE_ENV to 'production' in order to improve our performance and generate less-verbose error messages.

- -
    -
  1. -

    Do this by entering the following command:

    - - 
    cf set-env some-unique-name NODE_ENV production
-
    -
    2. -
  2. -

    We should also use a separate database for production. Cloud Foundry can take advantage of a marketplace to create a new service and automatically bind it to your app. Bind means place the service database credentials in the environment variable space of the container running your application for you to access. Enter the following commands:

    - - 
    cf create-service mlab sandbox node-express-tutorial-mongodb
-cf bind-service some-unique-name node-express-tutorial-mongodb
-
    -
    3. -
  3. -

    You can inspect your configuration variables at any time using the cf env some-unique-name command — try this now:

    - - 
    cf env some-unique-name
-
    -
    4. -
  4. -

    In order for your applications to use the new credentials you will have to restage your application, meaning that it will restart and apply the new environment variables. This can be done using the following — enter this command now:

    - - 
    cf restage some-unique-name
-
    -
    5. -
  5. -

    If you check the home page now it should show zero values for your object counts, as the changes above mean that we're now using a new (empty) database.

    -
    6. -
- -

Debugging

- -

The PWS cf client provides a few tools for debugging:

- -
>cf logs some-unique-name --recent  # Show current logs
->cf logs some-unique-name # Show current logs and keep updating with any new results
- -

Summary

- -

If you followed the above steps, you should have now deployed the LocalLibrary app to PWS. Well done! If the deployment wasn't successful, double check all the steps.

diff --git a/files/ja/orphaned/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html b/files/ja/orphaned/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html new file mode 100644 index 0000000000..ca5fcfa60f --- /dev/null +++ b/files/ja/orphaned/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html @@ -0,0 +1,243 @@ +--- +title: PWS/Cloud Foundry に LocalLibrary をインストールする +slug: orphaned/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry +translation_of: Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry +original_slug: Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry +--- +
{{LearnSidebar}}
+ +

この記事では Pivotal Web Services の PaaS クラウドに地域図書館をインストールする方法の実際的なデモンストレーションを提供します。これは、チュートリアルのパート7で使用されている PaaS クラウドサービスである Heroku のフル機能のオープンソース代替です。PWS/Cloud Foundry は、Heroku (または別の PaaS クラウドサービス) に代わるものを探している場合、または単に何か違うことを試したい場合には、絶対にチェックする価値があります。

+ +

Why PWS?

+ +

Pivotal Web Services is a public instance of the Open Source Cloud Foundry Platform. It is a polyglot platform supporting many different languages including Node.js, Java, PHP, Python, Staticfiles, and Ruby. It has a introductory free trial and is incredibly efficient for running Node applications! As Node and Express are open source projects, there is consistency with working with an open deployment platform such as Cloud Foundry. You can get under the hood and see how an application is hosted.

+ +

There are multiple reasons to use PWS!

+ +
    +
  • PWS has a flexible pricing that is extremely well tuned for small runtimes such as node. It's possible to run a redundant pair of your app for less than $5 per month. That includes a standby failover system to take over running your app if the main server fails at any point.
    • +
  • As a PaaS, PWS takes care of a lot of the web infrastructure for us. This makes it much easier to get started, because you don't worry about servers, load balancers, reverse proxies, restarting your website on a crash, or any of the other web infrastructure that PWS provides for us under the hood.
    • +
  • Because PWS is using Cloud Foundry, an open platform. You can therefore easily deploy your application to other Cloud Foundry providers such as IBM BlueMix, AnyNines and Swisscomm Application Cloud. The below instructions will work with any standard Cloud Foundry deployment with minor modifications.
    • +
  • While it does have some limitations, these will not affect this particular application. For example: +
      +
    • PWS and Cloud Foundry provide only short-lived storage so user-uploaded files cannot safely be stored on PWS itself.
      • +
    • The free trial is good for a year and only up to $87 of app usage. For a typical Node app that means you can run an app for an entire year.
      • +
    +
    • +
  • Mostly it just works, and if you end up loving it and want to upgrade, scaling your app is very easy.
    • +
  • PWS and other Cloud Foundry applications are used for production apps. 
    • +
+ +

How does PWS work?

+ +

PWS runs websites and applications using containers and has been for many years. Cloud Foundry started using a container technology called Warden and is now using a container system called Garden. These are very similar to the popular Docker container and in fact, many installations of Cloud Foundry support deploying Docker containers.

+ +

One of the advantages of using Cloud Foundry is that you do not need to create the container spec, as Cloud Foundry's buildpacks will manufacture them based on the latest components. Apps on Cloud Foundry should follow 12 Factor guidelines as the containers deployed are ephemeral and may be cleaned up at anytime and redeployed somewhere else in the cloud. This ensures that your apps and platform have the latest software. An application can consist of multiple instances where the application is placed into redundant containers that enable high availability of your app. Cloud Foundry will automatically handle all the load balancing between identical instances. This allows you to scale your application for performance and availability

+ +

Since the file system is ephemeral any temporary storage or services should be located elsewhere using backing services. This can be done using marketplace services available on different providers or by bringing your own via User Provided Services.

+ +

What do we cover below?

+ +

This post covers how to modify the LocalLibrary application from the tutorial for deployment on PWS and Cloud Foundry. In doing so, it covers the basics of deploying any node.js application to PWS with the following steps.

+ +
    +
  • Configuring the package.json file to run with the engines available on PWS.
    • +
  • Adding and installing the 'cfenv' node module to make working with services easier.
    • +
  • Using the cfenv module to connect to a MongoDB instance from mLab that was created and bound using the PWS marketplace.
    • +
  • Using the cf CLI tool to create a new mongoDB service instance and bind it to the local library application.
    • +
  • How to set environment variables for Node using the cf CLI.
    • +
  • How to look at logs, again using the cf CLI tool.
    • +
+ +

So let's get started. You have two options, you can go through the tutorial from the beginning or you can just download the completed project and modify it from there for use on PWS. To do the latter, you can do the following from a terminal:

+ +
git clone https://github.com/mdn/express-locallibrary-tutorial
+ +

You'll then need to follow the preparation steps listed in the Getting your website ready to publish section of Express Tutorial Part 7: Deploying to production, before then following the steps listed below.

+ +
+

Note: This work flow is based on the Mozilla Heroku work flow in the main Express/Node tutorial series for consistency, to help readers compare and contrast. 

+
+ +

Modifying the LocalLibrary for PWS

+ +

Deployment of a Node application on Cloud Foundry takes the following steps. Using the downloaded 'cf' CLI tool on your environment, your source code and supporting metadata files are uploaded to Cloud Foundry which will assemble and package the components of your application. Note that your files need to be located on your system to deploy or as a zip archive somewhere accessible on the internet. We'll assume the former.

+ +

This means, no assumptions about which source control system is used. As long as you have a complete source tree in your local file system you can deploy the app. There are some things you have to make available to ensure the correctly assembly of your Node application. First Cloud Foundry cf CLI will look for the presence of the 'package.json' file to determine the dependencies and download the necessary components. The rules of this assembly are defined in Cloud Foundry's nodejs buildpack. An optional cloud foundry manifest file can specify information about your application such as name, size and start command if non-standard. In addition to deploying the application, the cf CLI tool can also configure services, set environment variables and view logs. That's all the overview you need in order to get started (see Getting Started on Pivotal Web Services for a more comprehensive guide). Let's start making the changes so you'll need to deploy the LocalLibrary application to  PWS.

+ +

Set node version

+ +

The package.json contains everything needed to work out your application dependencies and what file should be launched to start your site. Cloud Foundry and PWS detects the presence of this file, and will use it to provision your app environment. The only useful information missing in our current package.json is the version of node. We can find the version of node we're using for development by entering the command:

+ +
node --version
+# will return version e.g. v6.10.3
+ +

Open package.json with a text editor, and add this information as an engines > node section as shown (using the version number retrieved above).

+ +
{
+  "name": "express-locallibrary-tutorial",
+  "version": "0.0.0",
+  "engines": {
+    "node": "6.10.3"
+  },
+  "private": true,
+  ...
+
+ +

Database configuration

+ +

So far in this tutorial we've used a single database that is hard coded into the app.js file. Normally we'd like to be able to have a different database for production and development, so next we'll modify the LocalLibrary website to get the database URI from the OS environment, and otherwise use our development database that we added manually earlier. Cloud Foundry has a very flexible services model that enables multiple services of the same type to exist in the environment. It stores all services related configurations in a single parseable JSON object called VCAP_SERVICES. A typical VCAP_SERVICES variable looks like this:

+ +
{
+ "VCAP_SERVICES": {
+  "mlab": [
+   {
+    "credentials": {
+     "uri": "mongodb://CloudFoundry_test_dev:somecr8zypassw0rd@dbhost.mlab.com:57971/CloudFoundry_dbname"
+    },
+    "label": "mlab",
+    "name": "node-express-tutorial-mongodb",
+    "plan": "sandbox",
+    "provider": null,
+    "syslog_drain_url": null,
+    "tags": [
+     "Cloud Databases",
+     "Developer Tools",
+     "Web-based",
+     "Data Store",
+    ],
+    "volume_mounts": []
+   }
+  ]
+ }
+}
+
+
+ +

Writing the code to extract and parse this environment variable is not hard, but it doesn't add a lot of value when others have written libraries to do this. In this case, there is a node.js package we can use called cfenv.

+ +

This will download the cfenv module and its dependencies, and modify the package.json file as required. Open app.js and find the block with all the 'requires' that load the modules into your application. In this example look for the line that looks something like this:

+ +
var expressValidator = require('express-validator');
+ +

If you cannot find that exact line, look for the blocks of 'requires' and look for the last one. Add the following text after it:

+ +
var cfenv = require('cfenv');
+ +
    +
  1. +

    To install the package, go to your terminal and make sure you are in the directory where the package.json file for LocalLibrary is. From the command line, type:

    + + 
    npm install cfenv
    +
    2. +
  2. +

    Now that you have loaded the module, this next line will instantiate an object that will contain the app and services information required for deployment. Add the following after the line that contains app.use(helmet());

    + + 
    // Set up CF environment variables
+var appEnv = cfenv.getAppEnv();
+
    + +

    When this line executes, all the Cloud Foundry application environment information will become available to the application in the appEnv object.

    +
    3. +
  3. +

    Now it is time to update the application to use the database configured by the platform. Find the line that sets the mongoDB connection variable. It will look something like this:

    + + 
    var mongoDB = process.env.MONGODB_URI || dev_db_url;
    +
    4. +
  4. +

    You will now modify the line with the following code  appEnv.getServiceURL('node-express-tutorial-mongodb') to get the connection string from an environment variable that is being managed by the cfenv  module. If no service has been created and bound it will use your own database URL you created as part of the tutorial instead of the one from the environment. So replace the line above with the following:

    + + 
    var mongoDB = appEnv.getServiceURL('node-express-tutorial-mongodb') || dev_db_url;
+
    +
    5. +
  5. +

    Now run the site locally (see Testing the routes for the relevant commands) and check that the site still behaves as you expect. At this point your app is ready to use with Cloud Foundry and Pivotal Web Services.

    +
    6. +
+ +

Get a Pivotal Web Services account

+ +

To start using Pivotal Web Services you will first need to create an account (skip ahead to Create and upload the website if you've already got an account and have already installed the PWS cf CLI client).

+ +
    +
  • Go to https://run.pivotal.io and click the SIGN UP FOR FREE button.
    • +
  • Enter your details and then press CREATE FREE ACCOUNT. You'll be asked to check your email for a sign-up email.
    • +
  • Click the account activation link in the signup email. You'll be taken back to your account on the web browser and you will complete the registration.
    • +
  • You will set your password and go through the rest of the new user sign up and how to claim your free trial account. Note you need a mobile phone to confirm your account. You will receive an "org" account funded with $87 of application usage credit. Note your email account can be in multiple orgs on PWS. This is similar to your user account on services like GitHub.
    • +
  • Go to https://console.run.pivotal.io and login in. You'll then be logged in and taken to the PWS dashboard: https://console.run.pivotal.io.
    • +
+ +

Install the cf CLI client

+ +

The cf CLI client is a software tool for managing and deploying your application. Download and install the PWS cf CLI client by following the instructions on Pivotal Web Services or downloading directly from GIthub. Be sure to download the correct version for your computer. After the client is installed you will be able run commands, for example to get help on the client:

+ +
cf help
+
+ +

We'll now go through the steps to login to PWS using the CLI and deploy — or in Cloud Foundry parlance "push" your app.

+ +

Create and upload the website

+ +

To create the app we navigate to the directory where our modified files are. This is the same directory where the LocalLibrary package.json file is located. First, let's tell the cf CLI which Cloud Foundry instance you want to use. We need to do this, since the cf CLI tool can be used with any standard Cloud Foundry system, so this command indicates which specific Cloud Foundry you are using. Enter the following terminal command now:

+ +
cf api api.run.pivotal.io
+ +

Next login using the following command (enter your email and password when prompted):

+ +
cf login
+Email: enter your email
+Password: enter your password
+ +

We can now push our app to PWS. In the below example. replace 'some-unique-name' with something you can remember that is likely to be unique. If it isn't unique, the system will let you know. The reason this name has to be unique to the PWS system is it is the address we will use to to access your LocalLibrary application. I used mozilla-express-tutorial-xyzzy. You should use something else.

+ +
cf push some-unique-name -m 256MB
+ +

Note the -m flag we added is not required. We just included it so that we only use 256MB of memory to run the app. Node apps typically can run in 128 MB, but we are being safe. If we didn't specify the memory, the CLI would use the default 1 GB of memory, but we want to make sure your trial lasts longer. You should now see a bunch of text on the screen. It will indicate that the CLI is uploading all your files, that it's using the node buildpack, and it will start the app. If we're lucky, the app is now "running" on the site at the URL https://some-unique-name.cfapps.io. Open your browser and run the new website by going to that URL.

+ +
Note: The site will be running using our hardcoded development database at this time. Create some books and other objects, and check out whether the site is behaving as you expect. In the next section we'll set it to use our new database.
+ +

Setting configuration variables

+ +

You will recall from a preceding section that we need to set NODE_ENV to 'production' in order to improve our performance and generate less-verbose error messages.

+ +
    +
  1. +

    Do this by entering the following command:

    + + 
    cf set-env some-unique-name NODE_ENV production
+
    +
    2. +
  2. +

    We should also use a separate database for production. Cloud Foundry can take advantage of a marketplace to create a new service and automatically bind it to your app. Bind means place the service database credentials in the environment variable space of the container running your application for you to access. Enter the following commands:

    + + 
    cf create-service mlab sandbox node-express-tutorial-mongodb
+cf bind-service some-unique-name node-express-tutorial-mongodb
+
    +
    3. +
  3. +

    You can inspect your configuration variables at any time using the cf env some-unique-name command — try this now:

    + + 
    cf env some-unique-name
+
    +
    4. +
  4. +

    In order for your applications to use the new credentials you will have to restage your application, meaning that it will restart and apply the new environment variables. This can be done using the following — enter this command now:

    + + 
    cf restage some-unique-name
+
    +
    5. +
  5. +

    If you check the home page now it should show zero values for your object counts, as the changes above mean that we're now using a new (empty) database.

    +
    6. +
+ +

Debugging

+ +

The PWS cf client provides a few tools for debugging:

+ +
>cf logs some-unique-name --recent  # Show current logs
+>cf logs some-unique-name # Show current logs and keep updating with any new results
+ +

Summary

+ +

If you followed the above steps, you should have now deployed the LocalLibrary app to PWS. Well done! If the deployment wasn't successful, double check all the steps.

diff --git a/files/pt-pt/_redirects.txt b/files/pt-pt/_redirects.txt index 0fd78a0a0c..5f775f9c9c 100644 --- a/files/pt-pt/_redirects.txt +++ b/files/pt-pt/_redirects.txt @@ -988,6 +988,8 @@ /pt-PT/docs/Web/JavaScript/Reference/Operadores/função /pt-PT/docs/Web/JavaScript/Reference/Operators/function /pt-PT/docs/Web/JavaScript/Reference/Sobre /pt-PT/docs/Web/JavaScript/Reference/About /pt-PT/docs/Web/MathML/Attribute/Valores /pt-PT/docs/Web/MathML/Attribute/Values +/pt-PT/docs/Web/MathML/Element/mglyph /pt-PT/docs/orphaned/Web/MathML/Element/mglyph +/pt-PT/docs/Web/MathML/Element/mlabeledtr /pt-PT/docs/orphaned/Web/MathML/Element/mlabeledtr /pt-PT/docs/Web/MathML/Examples/Derivar_a_Formula_Resolvente /pt-PT/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula /pt-PT/docs/Web/MathML/Examples/MathML_teorema_de_Pitagoras /pt-PT/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem /pt-PT/docs/Web/Progressive_web_apps/Guia_de_programacao /pt-PT/docs/Web/Progressive_web_apps/Developer_guide diff --git a/files/pt-pt/_wikihistory.json b/files/pt-pt/_wikihistory.json index fdcc9562e9..93134770ca 100644 --- a/files/pt-pt/_wikihistory.json +++ b/files/pt-pt/_wikihistory.json @@ -1798,24 +1798,12 @@ "joaonunomota" ] }, - "Web/MathML/Element/mglyph": { - "modified": "2020-10-15T22:32:17.025Z", - "contributors": [ - "joaonunomota" - ] - }, "Web/MathML/Element/mi": { "modified": "2020-10-15T22:32:20.399Z", "contributors": [ "joaonunomota" ] }, - "Web/MathML/Element/mlabeledtr": { - "modified": "2020-10-15T22:32:27.553Z", - "contributors": [ - "joaonunomota" - ] - }, "Web/MathML/Element/mmultiscripts": { "modified": "2020-10-15T22:32:37.118Z", "contributors": [ @@ -5188,5 +5176,17 @@ "wbamberg", "fscholz" ] + }, + "orphaned/Web/MathML/Element/mglyph": { + "modified": "2020-10-15T22:32:17.025Z", + "contributors": [ + "joaonunomota" + ] + }, + "orphaned/Web/MathML/Element/mlabeledtr": { + "modified": "2020-10-15T22:32:27.553Z", + "contributors": [ + "joaonunomota" + ] } } \ No newline at end of file diff --git a/files/pt-pt/orphaned/web/mathml/element/mglyph/index.html b/files/pt-pt/orphaned/web/mathml/element/mglyph/index.html new file mode 100644 index 0000000000..a8d5b18857 --- /dev/null +++ b/files/pt-pt/orphaned/web/mathml/element/mglyph/index.html @@ -0,0 +1,73 @@ +--- +title: +slug: orphaned/Web/MathML/Element/mglyph +tags: + - MathML + - MathML:Element + - Referência de MathML +translation_of: Web/MathML/Element/mglyph +original_slug: Web/MathML/Element/mglyph +--- +
{{MathMLRef}}
+ +

O elemento de MathML <mglyph> é usado para apresentar símbolos sem carateres de Unicode disponíveis. Pode ser usado dentro de token elements.

+ +

Atributos

+ +
+
alt
+
Este atributo define o texto alternativo que descreve a imagem. Os utilizadores verão isto apresentado se o URL da imagem estiver errado, se a imagem não estiver num dos formatos suportados, ou até a imagem ser descarregada.
+
class, id, style
+
Para uso com stylesheets.
+
height
+
A altura da imagem.
+
href
+
Usado para criar uma hiperligação para um URI.
+
mathbackground
+
A cor de fundo (se a imagem tem transparência). Pode usar #rgb, #rrggbb e nomes de cores de HTML.
+
src
+
O URL da imagem.
+
valign
+
Indica o alinhamento vertical com respeito à linha de base atual.
+
width
+
A largura da imagem.
+
+ +

Exemplos

+ +
<math>
+  <mi><mglyph src="my-glyph.png" alt="my glyph"/></mi>
+</math>
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{ SpecName('MathML3', 'chapter3.html#presm.mglyph', 'mglyph') }}{{ Spec2('MathML3') }}Especificação atual
{{ SpecName('MathML2', 'chapter3.html#presm.mglyph', 'mglyph') }}{{ Spec2('MathML2') }}Especificação inicial
+ +

Compatibilidade

+ + + + + +

{{Compat("mathml.elements.mglyph")}}

diff --git a/files/pt-pt/orphaned/web/mathml/element/mlabeledtr/index.html b/files/pt-pt/orphaned/web/mathml/element/mlabeledtr/index.html new file mode 100644 index 0000000000..bb8ffe4808 --- /dev/null +++ b/files/pt-pt/orphaned/web/mathml/element/mlabeledtr/index.html @@ -0,0 +1,100 @@ +--- +title: +slug: orphaned/Web/MathML/Element/mlabeledtr +tags: + - MathML + - MathML:Element + - MathML:Tabular Math + - Referência de MathML +translation_of: Web/MathML/Element/mlabeledtr +original_slug: Web/MathML/Element/mlabeledtr +--- +
{{MathMLRef}}
+ +

O elemento MathML <mlabeledtr> é utilizado para representar um rótulo/etiqueta numa fila quer do lado esquerdo, quer do direito (determinado utilizando o atributo side no elemento {{MathMLElement("mtable") }}). Os elementos criança de <mlabeledtr> devem ser {{MathMLElement("mtd") }} elementos. A primeira criança é o rótulo, enquanto todas as outras crianças representam conteúdos de linha e são tratadas de forma idêntica às crianças de elementos {{MathMLElement("mtr") }}.

+ +

Atributos

+ +
+
class, id, style
+
Para uso com stylesheets.
+
columnalign
+
Indica o alinhamento horizontal desta célula e sobrepõe o valor especificado por {{ MathMLElement("mtable") }}.
+ Os valores possíveis são: left, center e right.
+
groupalign
+
{{ unimplemented_inline() }}
+
href
+
Usado para criar uma hiperligação para um URI.
+
mathbackground
+
A cor de fundo. Pode usar #rgb, #rrggbb e nomes de cores de HTML.
+
mathcolor
+
A cor do texto. Pode usar #rgb, #rrggbb e nomes de cores de HTML.
+
rowalign
+
Indica o alinhamento vertical desta célula e sobrepõe o valor especificado por {{ MathMLElement("mtable") }}.
+ Os valores possíveis são: axis, baseline, bottom, center e top.
+
+ +

Exemplos

+ +

Exemplo: sample rendering for mlabeledtr

+ +
<math>
+  <mtable>
+
+    <mlabeledtr>
+      <mtd><mn>1</mn></mtd> <!-- label -->
+      <mtd><mi>A</mi></mtd>
+      <mtd><mi>B</mi></mtd>
+    </mlabeledtr>
+
+    <mtr>
+      <mtd><mi>C</mi></mtd>
+      <mtd><mi>D</mi></mtd>
+      <mtd><mi>E</mi></mtd>
+    </mtr>
+
+  </mtable>
+</math>
+
+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoEstadoComentário
{{ SpecName('MathML3', 'chapter3.html#presm.mlabeledtr', 'mlabeledtr') }}{{ Spec2('MathML3') }}Especificação atual
{{ SpecName('MathML2', 'chapter3.html#presm.mlabeledtr', 'mlabeledtr') }}{{ Spec2('MathML2') }}Especificação inicial
+ +

Compatibilidade

+ + + +

{{Compat("mathml.elements.mlabeledtr")}}

+ +

Notas para Gecko

+ +

A começar com Gecko 9.0 {{ geckoRelease("9.0") }} etiquetas são escondidas por pré-definição (mlabeledtr > mtd:first-child {display: none}) e não estragam a apresentação de tabelas por completo (ver {{ bug("356870") }}). Para ver a implementação deste elemento veja {{ bug("689641") }}.

+ +

Ver também

+ +
    +
  • {{ MathMLElement("mtable") }} (Tabela)
    • +
  • {{ MathMLElement("mtd") }} (Célula de tabela)
    • +
  • {{ MathMLElement("mtr") }} (Fila de Tabela)
    • +
diff --git a/files/pt-pt/web/mathml/element/mglyph/index.html b/files/pt-pt/web/mathml/element/mglyph/index.html deleted file mode 100644 index 1ae5f170dc..0000000000 --- a/files/pt-pt/web/mathml/element/mglyph/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: -slug: Web/MathML/Element/mglyph -tags: - - MathML - - 'MathML:Element' - - Referência de MathML -translation_of: Web/MathML/Element/mglyph ---- -
{{MathMLRef}}
- -

O elemento de MathML <mglyph> é usado para apresentar símbolos sem carateres de Unicode disponíveis. Pode ser usado dentro de token elements.

- -

Atributos

- -
-
alt
-
Este atributo define o texto alternativo que descreve a imagem. Os utilizadores verão isto apresentado se o URL da imagem estiver errado, se a imagem não estiver num dos formatos suportados, ou até a imagem ser descarregada.
-
class, id, style
-
Para uso com stylesheets.
-
height
-
A altura da imagem.
-
href
-
Usado para criar uma hiperligação para um URI.
-
mathbackground
-
A cor de fundo (se a imagem tem transparência). Pode usar #rgb, #rrggbb e nomes de cores de HTML.
-
src
-
O URL da imagem.
-
valign
-
Indica o alinhamento vertical com respeito à linha de base atual.
-
width
-
A largura da imagem.
-
- -

Exemplos

- -
<math>
-  <mi><mglyph src="my-glyph.png" alt="my glyph"/></mi>
-</math>
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoEstadoComentário
{{ SpecName('MathML3', 'chapter3.html#presm.mglyph', 'mglyph') }}{{ Spec2('MathML3') }}Especificação atual
{{ SpecName('MathML2', 'chapter3.html#presm.mglyph', 'mglyph') }}{{ Spec2('MathML2') }}Especificação inicial
- -

Compatibilidade

- - - - - -

{{Compat("mathml.elements.mglyph")}}

diff --git a/files/pt-pt/web/mathml/element/mlabeledtr/index.html b/files/pt-pt/web/mathml/element/mlabeledtr/index.html deleted file mode 100644 index 6f91a6b2d7..0000000000 --- a/files/pt-pt/web/mathml/element/mlabeledtr/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: -slug: Web/MathML/Element/mlabeledtr -tags: - - MathML - - 'MathML:Element' - - 'MathML:Tabular Math' - - Referência de MathML -translation_of: Web/MathML/Element/mlabeledtr ---- -
{{MathMLRef}}
- -

O elemento MathML <mlabeledtr> é utilizado para representar um rótulo/etiqueta numa fila quer do lado esquerdo, quer do direito (determinado utilizando o atributo side no elemento {{MathMLElement("mtable") }}). Os elementos criança de <mlabeledtr> devem ser {{MathMLElement("mtd") }} elementos. A primeira criança é o rótulo, enquanto todas as outras crianças representam conteúdos de linha e são tratadas de forma idêntica às crianças de elementos {{MathMLElement("mtr") }}.

- -

Atributos

- -
-
class, id, style
-
Para uso com stylesheets.
-
columnalign
-
Indica o alinhamento horizontal desta célula e sobrepõe o valor especificado por {{ MathMLElement("mtable") }}.
- Os valores possíveis são: left, center e right.
-
groupalign
-
{{ unimplemented_inline() }}
-
href
-
Usado para criar uma hiperligação para um URI.
-
mathbackground
-
A cor de fundo. Pode usar #rgb, #rrggbb e nomes de cores de HTML.
-
mathcolor
-
A cor do texto. Pode usar #rgb, #rrggbb e nomes de cores de HTML.
-
rowalign
-
Indica o alinhamento vertical desta célula e sobrepõe o valor especificado por {{ MathMLElement("mtable") }}.
- Os valores possíveis são: axis, baseline, bottom, center e top.
-
- -

Exemplos

- -

Exemplo: sample rendering for mlabeledtr

- -
<math>
-  <mtable>
-
-    <mlabeledtr>
-      <mtd><mn>1</mn></mtd> <!-- label -->
-      <mtd><mi>A</mi></mtd>
-      <mtd><mi>B</mi></mtd>
-    </mlabeledtr>
-
-    <mtr>
-      <mtd><mi>C</mi></mtd>
-      <mtd><mi>D</mi></mtd>
-      <mtd><mi>E</mi></mtd>
-    </mtr>
-
-  </mtable>
-</math>
-
- -

Especificações

- - - - - - - - - - - - - - - - - - - - - -
EspecificaçãoEstadoComentário
{{ SpecName('MathML3', 'chapter3.html#presm.mlabeledtr', 'mlabeledtr') }}{{ Spec2('MathML3') }}Especificação atual
{{ SpecName('MathML2', 'chapter3.html#presm.mlabeledtr', 'mlabeledtr') }}{{ Spec2('MathML2') }}Especificação inicial
- -

Compatibilidade

- - - -

{{Compat("mathml.elements.mlabeledtr")}}

- -

Notas para Gecko

- -

A começar com Gecko 9.0 {{ geckoRelease("9.0") }} etiquetas são escondidas por pré-definição (mlabeledtr > mtd:first-child {display: none}) e não estragam a apresentação de tabelas por completo (ver {{ bug("356870") }}). Para ver a implementação deste elemento veja {{ bug("689641") }}.

- -

Ver também

- -
    -
  • {{ MathMLElement("mtable") }} (Tabela)
    • -
  • {{ MathMLElement("mtd") }} (Célula de tabela)
    • -
  • {{ MathMLElement("mtr") }} (Fila de Tabela)
    • -
diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index 7172def406..217bd711d9 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -822,6 +822,7 @@ /ru/docs/Web/JavaScript/Справочник_по_JavaScript_1.5/Операции/Битовые_Операции /ru/docs/conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 /ru/docs/Web/JavaScript/Справочник_по_JavaScript_1.5/Операции/Операции_Присваивания /ru/docs/conflicting/Web/JavaScript/Reference/Operators_8d54701de06af40a7c984517cbe87b3e /ru/docs/Web/Manifest/serviceworker /ru/docs/orphaned/Web/Manifest/serviceworker +/ru/docs/Web/MathML/Element/mglyph /ru/docs/orphaned/Web/MathML/Element/mglyph /ru/docs/Web/MathML/Атрибут /ru/docs/Web/MathML/Attribute /ru/docs/Web/MathML/Примеры /ru/docs/Web/MathML/Examples /ru/docs/Web/MathML/Примеры/Deriving_the_Quadratic_Formula /ru/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index b7c8afe669..170225c76e 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -19101,12 +19101,6 @@ "bsergey" ] }, - "Web/MathML/Element/mglyph": { - "modified": "2020-10-30T16:27:27.508Z", - "contributors": [ - "d0rj" - ] - }, "Web/MathML/Element/mn": { "modified": "2020-10-30T16:23:01.293Z", "contributors": [ @@ -25988,5 +25982,11 @@ "wbamberg", "Mingun" ] + }, + "orphaned/Web/MathML/Element/mglyph": { + "modified": "2020-10-30T16:27:27.508Z", + "contributors": [ + "d0rj" + ] } } \ No newline at end of file diff --git a/files/ru/orphaned/web/mathml/element/mglyph/index.html b/files/ru/orphaned/web/mathml/element/mglyph/index.html new file mode 100644 index 0000000000..37bc0ad8b7 --- /dev/null +++ b/files/ru/orphaned/web/mathml/element/mglyph/index.html @@ -0,0 +1,72 @@ +--- +title: +slug: orphaned/Web/MathML/Element/mglyph +tags: + - MathML + - MathML:Element + - Глиф + - Символ +translation_of: Web/MathML/Element/mglyph +original_slug: Web/MathML/Element/mglyph +--- +
{{MathMLRef}}
+ +

Элемент <mglyph> разметки MathML используется для отображения нестандартных символов там, где существующиt символы Unicode недоступны. Его можно использовать в элементах-токенах.

+ +

Атрибуты

+ +
+
alt
+
Этот атрибут определяет альернативный текст, описывающий изображение. Пользователи увидят этот текст, если URL адрес изображения неправильный, изображение не в одном из поддерживаемых форматов или пока изображение не будет загружено.
+
class, id, style
+
Предусмотрено для использования с таблицами стилей.
+
height
+
Высота изображения.
+
href
+
Используется для установки гиперссылки на указанный URI.
+
mathbackground
+
Цвет фона (если изображение имеет прозрачность). Вы можете использовать #rgb, #rrggbb и имена цветов HTML.
+
src
+
URL изображения.
+
valign
+
Задаёт вертикальное выравнивание относительно текущей базовой линии.
+
width
+
Ширина изображения.
+
+ +

Пример

+ +
<math>
+  <mi><mglyph src="my-glyph.png" alt="my glyph"/></mi>
+</math>
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('MathML3', 'chapter3.html#presm.mglyph', 'mglyph') }}{{ Spec2('MathML3') }}Текущая спецификация
{{ SpecName('MathML2', 'chapter3.html#presm.mglyph', 'mglyph') }}{{ Spec2('MathML2') }}Начальная спецификация
+ +

Совместимость с браузерами

+ + + +

{{Compat("mathml.elements.mglyph")}}

diff --git a/files/ru/web/mathml/element/mglyph/index.html b/files/ru/web/mathml/element/mglyph/index.html deleted file mode 100644 index 4c52c451b6..0000000000 --- a/files/ru/web/mathml/element/mglyph/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: -slug: Web/MathML/Element/mglyph -tags: - - MathML - - 'MathML:Element' - - Глиф - - Символ -translation_of: Web/MathML/Element/mglyph ---- -
{{MathMLRef}}
- -

Элемент <mglyph> разметки MathML используется для отображения нестандартных символов там, где существующиt символы Unicode недоступны. Его можно использовать в элементах-токенах.

- -

Атрибуты

- -
-
alt
-
Этот атрибут определяет альернативный текст, описывающий изображение. Пользователи увидят этот текст, если URL адрес изображения неправильный, изображение не в одном из поддерживаемых форматов или пока изображение не будет загружено.
-
class, id, style
-
Предусмотрено для использования с таблицами стилей.
-
height
-
Высота изображения.
-
href
-
Используется для установки гиперссылки на указанный URI.
-
mathbackground
-
Цвет фона (если изображение имеет прозрачность). Вы можете использовать #rgb, #rrggbb и имена цветов HTML.
-
src
-
URL изображения.
-
valign
-
Задаёт вертикальное выравнивание относительно текущей базовой линии.
-
width
-
Ширина изображения.
-
- -

Пример

- -
<math>
-  <mi><mglyph src="my-glyph.png" alt="my glyph"/></mi>
-</math>
-
- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{ SpecName('MathML3', 'chapter3.html#presm.mglyph', 'mglyph') }}{{ Spec2('MathML3') }}Текущая спецификация
{{ SpecName('MathML2', 'chapter3.html#presm.mglyph', 'mglyph') }}{{ Spec2('MathML2') }}Начальная спецификация
- -

Совместимость с браузерами

- - - -

{{Compat("mathml.elements.mglyph")}}

diff --git a/files/tr/_redirects.txt b/files/tr/_redirects.txt index 6409aff89b..b96a3aefcd 100644 --- a/files/tr/_redirects.txt +++ b/files/tr/_redirects.txt @@ -34,6 +34,7 @@ /tr/docs/JavaScript/Reference/Global_Objects/Array /tr/docs/Web/JavaScript/Reference/Global_Objects/Array /tr/docs/JavaScript/Reference/Global_Objects/Array/concat /tr/docs/Web/JavaScript/Reference/Global_Objects/Array/concat /tr/docs/JavaScript/Reference/Global_Objects/Array/prototype /tr/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype +/tr/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks /tr/docs/orphaned/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks /tr/docs/Learn/Common_questions/Tarayıcı_geliştirici_araçları_araçları_nelerdir /tr/docs/Learn/Common_questions/What_are_browser_developer_tools /tr/docs/MDN/Community /tr/docs/orphaned/MDN/Community /tr/docs/MDN/Contribute/Editor /tr/docs/orphaned/MDN/Editor diff --git a/files/tr/_wikihistory.json b/files/tr/_wikihistory.json index 8932b24ecd..7d9d430f46 100644 --- a/files/tr/_wikihistory.json +++ b/files/tr/_wikihistory.json @@ -115,12 +115,6 @@ "hakantr" ] }, - "Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks": { - "modified": "2020-10-15T21:52:54.629Z", - "contributors": [ - "hakantr" - ] - }, "Learn/CSS/Building_blocks/Selectors/Combinators": { "modified": "2020-10-26T18:41:35.670Z", "contributors": [ @@ -2398,5 +2392,11 @@ "cicekonur", "umutozdemir97" ] + }, + "orphaned/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks": { + "modified": "2020-10-15T21:52:54.629Z", + "contributors": [ + "hakantr" + ] } } \ No newline at end of file diff --git a/files/tr/learn/css/building_blocks/selectors/box_model_tasks/index.html b/files/tr/learn/css/building_blocks/selectors/box_model_tasks/index.html deleted file mode 100644 index 8e47528ca3..0000000000 --- a/files/tr/learn/css/building_blocks/selectors/box_model_tasks/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: 'Becerilerinizi test edin: Kutu Modeli' -slug: Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks -tags: - - Başlangıç - - CSS -translation_of: Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks ---- -
{{LearnSidebar}}
- -
- -

Bu görevin amacı, CSS Kutu Modeli hakkında anlayşınızı kontrol etmenize yardımcı olmaktır.

- -
-

Not: Aşağıdaki etkileşimli düzenleyicilerde çözümleri deneyebilirsiniz, ayrıca kodu indirmek ve görevler üzerinde çalışmak için CodePen, jsFiddle veya Glitch gibi çevrimiçi bir araç kullanmakta faydalı olabilir.

- -

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme veya daha fazla yardım")}} bülümüne bakabilirsiniz.

-
- -

Kutu Model Bir

- -

Aşağıdaki iki kutudan biri standart kutu modeli, diğeri ise alternatif kutu modelini kullanıyor. .alternate sınıfına kurallar ekleyerek ikinci kutunun genişliğini , ilk kutunun görsel genişliğiyle eşleşecek şekilde değiştirin. İşin sonunda görseliniz aşağıdaki resim gibi görünmelidir.

- -

Two boxes of the same size

- -

Bitmiş örneği yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}

- -
-

Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, kaynak kodları indirin.

-
- -

Kutu Modeli İki

- -

Bu görevde kutuya şunları ekleyin:

- -
    -
  • 5px, siyah ve noktalı bir kenarlık.
    • -
  • 20px üst kenar boşluğu.
    • -
  • 1em sağ kenar boşluğu.
    • -
  • 40px bir alt kenar boşluğu.
    • -
  • 2em'lik bir sol kenar boşluğu.
    • -
  • her tarafına 1em'lik dolguA box with a dotted border
    • -
- -

Örneği resimdeki gibi yeniden oluşturmak için aşağıdaki canlı kodu yeniden düzenleyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}

- -
-

Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, kaynak kodları indirin.

-
- -

Kutu Modeli Üç

- -

Bu örnekte, satıriçi öğenin bir kenar boşluğu, dolgusu ve kanarlığı vardır, ancak üstündeki ve altındaki çizgiler diğer öğelerin üzerine binmektedir. Öğeyi satır içinde tutarken kenar boşluğunun, dolgusunun ve kenarlığının boyutunun diğer satırlar tarafından dikkate alınmasını sağlamak için CSS'nize ne ekleyebilirsiniz.?

- -

An inline box with space between it and the text around it.

- -

Resimdeki görüntüyü oluşturabilmek için aşağıdaki kodu yeniden düzenleyin:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}

- -
-

Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, kaynak kodları indirin.

-
- -

Değerlendirme veya daha fazla yardım

- -

Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.

- -

Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:

- -
    -
  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.
    2. -
  2. Bize MDN Discourse forum Learning category değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: -
      -
    • "Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.
      • -
    • Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.
      • -
    • Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.
      • -
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.
      • -
    -
    3. -
diff --git a/files/tr/orphaned/learn/css/building_blocks/selectors/box_model_tasks/index.html b/files/tr/orphaned/learn/css/building_blocks/selectors/box_model_tasks/index.html new file mode 100644 index 0000000000..947424114f --- /dev/null +++ b/files/tr/orphaned/learn/css/building_blocks/selectors/box_model_tasks/index.html @@ -0,0 +1,87 @@ +--- +title: 'Becerilerinizi test edin: Kutu Modeli' +slug: orphaned/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks +tags: + - Başlangıç + - CSS +translation_of: Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks +original_slug: Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks +--- +
{{LearnSidebar}}
+ +
+ +

Bu görevin amacı, CSS Kutu Modeli hakkında anlayşınızı kontrol etmenize yardımcı olmaktır.

+ +
+

Not: Aşağıdaki etkileşimli düzenleyicilerde çözümleri deneyebilirsiniz, ayrıca kodu indirmek ve görevler üzerinde çalışmak için CodePen, jsFiddle veya Glitch gibi çevrimiçi bir araç kullanmakta faydalı olabilir.

+ +

Sıkışırsanız, bizden yardım isteyin — bu sayfanın altındaki {{anch("Değerlendirme veya daha fazla yardım")}} bülümüne bakabilirsiniz.

+
+ +

Kutu Model Bir

+ +

Aşağıdaki iki kutudan biri standart kutu modeli, diğeri ise alternatif kutu modelini kullanıyor. .alternate sınıfına kurallar ekleyerek ikinci kutunun genişliğini , ilk kutunun görsel genişliğiyle eşleşecek şekilde değiştirin. İşin sonunda görseliniz aşağıdaki resim gibi görünmelidir.

+ +

Two boxes of the same size

+ +

Bitmiş örneği yeniden oluşturmak için aşağıdaki canlı kodu düzenlemeyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/box-models.html", '100%', 1100)}}

+ +
+

Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, kaynak kodları indirin.

+
+ +

Kutu Modeli İki

+ +

Bu görevde kutuya şunları ekleyin:

+ +
    +
  • 5px, siyah ve noktalı bir kenarlık.
    • +
  • 20px üst kenar boşluğu.
    • +
  • 1em sağ kenar boşluğu.
    • +
  • 40px bir alt kenar boşluğu.
    • +
  • 2em'lik bir sol kenar boşluğu.
    • +
  • her tarafına 1em'lik dolguA box with a dotted border
    • +
+ +

Örneği resimdeki gibi yeniden oluşturmak için aşağıdaki canlı kodu yeniden düzenleyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/mbp.html", '100%', 600)}}

+ +
+

Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, kaynak kodları indirin.

+
+ +

Kutu Modeli Üç

+ +

Bu örnekte, satıriçi öğenin bir kenar boşluğu, dolgusu ve kanarlığı vardır, ancak üstündeki ve altındaki çizgiler diğer öğelerin üzerine binmektedir. Öğeyi satır içinde tutarken kenar boşluğunun, dolgusunun ve kenarlığının boyutunun diğer satırlar tarafından dikkate alınmasını sağlamak için CSS'nize ne ekleyebilirsiniz.?

+ +

An inline box with space between it and the text around it.

+ +

Resimdeki görüntüyü oluşturabilmek için aşağıdaki kodu yeniden düzenleyin:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/box-model/inline-block.html", '100%', 800)}}

+ +
+

Kendi editörünüzde veya çevrimiçi bir düzenleyicide çalışmak için, kaynak kodları indirin.

+
+ +

Değerlendirme veya daha fazla yardım

+ +

Bu örnekleri yukarıda bahsedilen Etkileşimli Editörlerde deneyebilirsiniz.

+ +

Çalışmanizin değerlendirilmesini istiyorsanız veya bir noktada takılıp kaldıysanız ve yardım istemek istiyorsanız:

+ +
    +
  1. Çalışmanızı CodePen, jsFiddle, veya Glitch gibi çevrimiçi paylaşılabilir bir düzenleyiciye kaydedin. Kodu kendiniz yazabilir veya yukarıdaki bölümlerde bağlantı verilen kaynak kodları kullanabilirsiniz.
    2. +
  2. Bize MDN Discourse forum Learning category değerlendirme ve/veya yardım isteyen bir gönderi yazın. Gönderinizde bulunması gerekenler: +
      +
    • "Kutu Modeli Beceri testi 1 için istenen değerlendirme" gibi açıklayıcı bir başlık.
      • +
    • Halihazırda denediklerinizin ve bizden ne yapmamızı istediğinizle ilgili ayrıntılar.
      • +
    • Değerlendirilmek istediğiniz veya yardıma ihtiyaç duyduğunuz kodun çevrimiçi paylaşılabilir düzenleyicide bağlantısı. Göremediğimiz bir kod üzerinde değerlendirme ve/veya yardımda bulunamayız.
      • +
    • Yardım almak istediğiniz soruyu bulabilmemiz için asıl görev veya değerlendirme sayfasına bir bağlantı.
      • +
    +
    3. +
diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 47924845a6..46943b1804 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1452,6 +1452,7 @@ /zh-CN/docs/Web/API/AudioContext/sampleRate /zh-CN/docs/Web/API/BaseAudioContext/sampleRate /zh-CN/docs/Web/API/AudioContext/state /zh-CN/docs/Web/API/BaseAudioContext/state /zh-CN/docs/Web/API/AudioNode/connect(AudioParam) /zh-CN/docs/orphaned/Web/API/AudioNode/connect(AudioParam) +/zh-CN/docs/Web/API/Beacon_API/Using_the_Beacon_API /zh-CN/docs/conflicting/Web/API/Beacon_API /zh-CN/docs/Web/API/Blob.size /zh-CN/docs/Web/API/Blob/size /zh-CN/docs/Web/API/Blob.slice /zh-CN/docs/Web/API/Blob/slice /zh-CN/docs/Web/API/Blob.type /zh-CN/docs/Web/API/Blob/type @@ -2691,6 +2692,7 @@ /zh-CN/docs/learn/Server-side/Django/主页构建 /zh-CN/docs/Learn/Server-side/Django/Home_page /zh-CN/docs/learn/Server-side/Django/开发环境 /zh-CN/docs/Learn/Server-side/Django/development_environment /zh-CN/docs/learn/Server-side/Django/管理站点 /zh-CN/docs/Learn/Server-side/Django/Admin_site +/zh-CN/docs/learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry /zh-CN/docs/orphaned/learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry /zh-CN/docs/learn/WebGL/By_example /zh-CN/docs/Web/API/WebGL_API/By_example /zh-CN/docs/learn/WebGL/By_example/Basic_scissoring /zh-CN/docs/Web/API/WebGL_API/By_example/Basic_scissoring /zh-CN/docs/learn/WebGL/By_example/Boilerplate_1 /zh-CN/docs/Web/API/WebGL_API/By_example/Boilerplate_1 diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index b214171611..31836b726e 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -6704,14 +6704,6 @@ "c1er" ] }, - "Web/API/Beacon_API/Using_the_Beacon_API": { - "modified": "2020-04-23T03:45:20.732Z", - "contributors": [ - "biqing", - "April421", - "xgqfrms" - ] - }, "Web/API/BeforeInstallPromptEvent": { "modified": "2020-08-04T05:58:35.403Z", "contributors": [ @@ -45032,13 +45024,6 @@ "edgar-chen" ] }, - "learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry": { - "modified": "2020-09-24T11:45:05.090Z", - "contributors": [ - "Mdreame", - "edgar-chen" - ] - }, "learn/Server-side/Express_Nodejs/Introduction": { "modified": "2020-07-16T22:38:13.912Z", "contributors": [ @@ -50798,5 +50783,20 @@ "contributors": [ "Arktische" ] + }, + "orphaned/learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry": { + "modified": "2020-09-24T11:45:05.090Z", + "contributors": [ + "Mdreame", + "edgar-chen" + ] + }, + "conflicting/Web/API/Beacon_API": { + "modified": "2020-04-23T03:45:20.732Z", + "contributors": [ + "biqing", + "April421", + "xgqfrms" + ] } } \ No newline at end of file diff --git a/files/zh-cn/conflicting/web/api/beacon_api/index.html b/files/zh-cn/conflicting/web/api/beacon_api/index.html new file mode 100644 index 0000000000..c208786a53 --- /dev/null +++ b/files/zh-cn/conflicting/web/api/beacon_api/index.html @@ -0,0 +1,105 @@ +--- +title: 使用 Beacon API +slug: conflicting/Web/API/Beacon_API +tags: + - Web 性能 + - 指南 +translation_of: Web/API/Beacon_API/Using_the_Beacon_API +original_slug: Web/API/Beacon_API/Using_the_Beacon_API +--- +
{{DefaultAPISidebar("Beacon")}}{{SeeCompatTable}}
+ +

Beacon 接口用来调度向 Web 服务器发送的异步非阻塞请求。

+ +
    +
  • Beacon 请求使用 HTTP POST 方法，并且不需要有响应。
    • +
  • Beacon 请求能确保在页面触发 unload 之前完成初始化。
    • +
+ +

这篇文档包含了 Beacon 接口的一些例子，可以在 {{domxref("Beacon_API","Beacon API")}} 查阅对应的 API。

+ + + +

Beacon API 的 {{domxref("Navigator.sendBeacon()")}} ，会在全局上下文中向服务器发起一个 beacon 请求。这个方法需要两个参数:  URL 以及要发送的数据 data 。其中 data 参数是可选的，它的类型可以为 {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, 或者 {{domxref("FormData")}}.

+ +

如果浏览器成功地将 beacon 请求加入到待发送的队列里，这个方法将会返回 true ，否则将会返回 false 。

+ +

下面的例子注册了 {{event("load")}} 事件和  {{event("beforeunload")}} 事件的回调函数， 并且在回调函数里面调用了 sendBeacon() 方法。

+ +
window.onload = window.onunload = function analytics(event) {
+  if (!navigator.sendBeacon) return;
+
+  var url = "https://example.com/analytics";
+  // 创建待发送数据
+  var data = "state=" + event.type + "&location=" + location.href;
+
+  // 发送beacon请求
+  var status = navigator.sendBeacon(url, data);
+
+  // 打印数据以及结果
+  console.log("sendBeacon: URL = ", url, "; data = ", data, "; status = ", status);
+};
+
+ +

接下来的例子创建了一个 {{event("submit")}} 事件的回调函数，并且当submit事件触发时，调用 sendBeacon()方法。

+ +
window.onsubmit = function send_analytics() {
+  var data = JSON.stringify({
+    location: location.href,
+    time: Date()
+  });
+
+  navigator.sendBeacon('/analytics', data);
+};
+
+ +

WorkerNavigator.sendBeacon()

+ +

Beacon API 的 {{domxref("WorkerNavigator.sendBeacon()")}} 的使用方法，跟平常的使用方法完全相同，区别仅在与这个方法存在 {{domxref("WorkerGlobalScope","worker 全局作用域")}} 中

+ +

接下来的例子展示了，使用  {{domxref("Worker")}} 发送了一个 beacon 请求，使用了全局上下文的 URL 和数据。

+ +

这是全局上下文的代码片段:

+ +
function worker_send(url, data) {
+  // 创建 worker 对象
+  var myWorker = new Worker("worker-using.js");
+
+  // 向 worker 发送 URL 以及 data
+  myWorker.postMessage([url, data]);
+
+  // 注册回调函数接收来自 worker 的成功或失败信息
+  myWorker.onmessage = function(event) {
+    var msg = event.data;
+    // 打印 worker 的发送状态
+    console.log("Worker reply: sendBeacon() status = " + msg);
+  };
+}
+
+ +

这是 worker 中的代码片段 (worker-using.js):

+ +
onmessage = function(event) {
+  var msg = event.data;
+  // 从 msg 中分离 URL 和 data
+  var url = msg[0];
+  var data = msg[1];
+
+  // 如果浏览器支持在 worker 里面调用 sendBeacon()， 那就发送beacon请求
+  // 否则返回失败信息给全局上下文
+  if (self.navigator.sendBeacon) {
+    var status = self.navigator.sendBeacon(url, data);
+    postMessage(status ? "success" : "fail");
+  } else {
+    postMessage("Worker: self.navigator.sendBeacon is unsupported");
+  }
+}
+
+ +

查看更多

+ + diff --git a/files/zh-cn/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html b/files/zh-cn/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html deleted file mode 100644 index e3f321e83a..0000000000 --- a/files/zh-cn/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: 在 PWS/Cloud Foundry 上，安装 LocalLibrary -slug: learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry -translation_of: Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry ---- -
{{LearnSidebar}}
- -

本文提供了如何在 Pivotal Web Services PaaS cloud 云上安装 LocalLibrary的实际演示 - 这是 Heroku 的全功能，开源替代品，Heroku 是我们教程第 7 部分中使用的 PaaS 云服务。如果您正在寻找 Heroku（或其他 PaaS 云服务）的替代方案，或者只是想尝试不同的东西，PWS / Cloud Foundry 绝对值得一试。

- -

为什么是 PWS?

- -

Pivotal Web Services 是开源云代工平台的公共实例。它是一个多语言平台，支持许多不同的语言，包括Node.js，Java，PHP，Python，Staticfiles 和 Ruby。它有一个免费试用版，对于运行 Node 应用程序非常有效！由于 Node 和 Express 是开源项目，因此与使用 Cloud Foundry 等开放式部署平台保持一致。您可以深入了解应用程序的托管方式。

- -

使用PWS有多种原因！

- -
    -
  • PWS具有灵活的定价，可以很好地适应 node 等小型运行。你可以用每月不到 5 美元的价格，运行一对冗余的应用程序。这包括备用故障转移系统，如果主服务器在任何时候出现故障，它将接管运行您的应用程序。
    • -
  • 作为PaaS，PWS为我们提供了大量的 Web 基础设施。这使得入门更加容易，因为您不必担心服务器、负载平衡器、反向代理、崩溃时重新启动网站，或者PWS 为我们提供的任何其他 Web 基础结构。
    • -
  • 因为 PWS 使用的是 Cloud Foundry，一个开放的平台。因此，您可以轻松地将应用程序，部署到其他 Cloud Foundry 提供商，例如 IBM BlueMix, AnyNines 和 Swisscomm Application Cloud。以下说明，适用于任何标准的 Cloud Foundry 部署，只需稍加修改即可。
    • -
  • 虽然它确实有一些限制，但这些不会影响这个特定的应用程序。例如： -
      -
    • PWS 和 Cloud Foundry 仅提供短期存储，因此用户上载的文件，无法安全地长期存储在 PWS 本身上。
      • -
    • 免费试用一年有效，限制最高 87美元的应用程序使用量。对于典型的 Node 应用程序，这意味着您可以运行一整年的应用程序。
      • -
    -
    • -
  • 大多数情况下它只是可以工作，如果你最终喜欢它，并希望升级，那么扩展你的应用程序非常容易。
    • -
  • PWS 和其他 Cloud Foundry 应用程序，可用于生产级别的应用程序。
    • -
- -

PWS 是如何工作的？

- -

PWS通过容器来运行网站和应用已经有些年头了。Cloud Foundry一开始采用的容器技术名为Warden，现在使用的是名为Garden的容器系统。这些技术与流行的Docker容器很相似，而且事实上Cloud Foundry云平台的很多设施都支持部署Docker容器。

- -

使用Cloud Foundry云平台的好处之一是您不需要创建容器规范，因为Cloud Foundry的构建包会基于最新的组件来生成它们。由于容器是临时部署的，而且可能随时被清理并部署到云中的其他位置，所以Cloud Foundry云平台上的应用需要遵循十二要素准则。如此可以确保您的应用和平台使用最新的软件。一个应用程序可以包含多个实例，在这些实例中，应用程序被放置到冗余容器中，从而实现应用程序的高可用性。Cloud Foundry会自动处理相同实例之间的所有负载平衡。这允许您扩展应用程序的性能和可用性。

- -

由于文件系统是临时的，所以任何临时存储或服务都应该使用备份服务放置到其他地方。这可以通过使用不同提供商提供的市场服务或通过用户自己提供的服务来实现。

- -

What do we cover below?

- -

This post covers how to modify the LocalLibrary application from the tutorial for deployment on PWS and Cloud Foundry. In doing so, it covers the basics of deploying any node.js application to PWS with the following steps.

- -
    -
  • Configuring the package.json file to run with the engines available on PWS.
    • -
  • Adding and installing the 'cfenv' node module to make working with services easier.
    • -
  • Using the cfenv module to connect to a MongoDB instance from mLab that was created and bound using the PWS marketplace.
    • -
  • Using the cf CLI tool to create a new mongoDB service instance and bind it to the local library application.
    • -
  • How to set environment variables for Node using the cf CLI.
    • -
  • How to look at logs, again using the cf CLI tool.
    • -
- -

So let's get started. You have two options, you can go through the tutorial from the beginning or you can just download the completed project and modify it from there for use on PWS. To do the latter, you can do the following from a terminal:

- -
git clone https://github.com/mdn/express-locallibrary-tutorial
- -

You'll then need to follow the preparation steps listed in the Getting your website ready to publish section of Express Tutorial Part 7: Deploying to production, before then following the steps listed below.

- -
-

Note: This work flow is based on the Mozilla Heroku work flow in the main Express/Node tutorial series for consistency, to help readers compare and contrast. 

-
- -

Modifying the LocalLibrary for PWS

- -

Deployment of a Node application on Cloud Foundry takes the following steps. Using the downloaded 'cf' CLI tool on your environment, your source code and supporting metadata files are uploaded to Cloud Foundry which will assemble and package the components of your application. Note that your files need to be located on your system to deploy or as a zip archive somewhere accessible on the internet. We'll assume the former.

- -

This means, no assumptions about which source control system is used. As long as you have a complete source tree in your local file system you can deploy the app. There are some things you have to make available to ensure the correctly assembly of your Node application. First Cloud Foundry cf CLI will look for the presence of the 'package.json' file to determine the dependencies and download the necessary components. The rules of this assembly are defined in Cloud Foundry's nodejs buildpack. An optional cloud foundry manifest file can specify information about your application such as name, size and start command if non-standard. In addition to deploying the application, the cf CLI tool can also configure services, set environment variables and view logs. That's all the overview you need in order to get started (see Getting Started on Pivotal Web Services for a more comprehensive guide). Let's start making the changes so you'll need to deploy the LocalLibrary application to  PWS.

- -

Set node version

- -

The package.json contains everything needed to work out your application dependencies and what file should be launched to start your site. Cloud Foundry and PWS detects the presence of this file, and will use it to provision your app environment. The only useful information missing in our current package.json is the version of node. We can find the version of node we're using for development by entering the command:

- -
node --version
-# will return version e.g. v6.10.3
- -

Open package.json with a text editor, and add this information as an engines > node section as shown (using the version number retrieved above).

- -
{
-  "name": "express-locallibrary-tutorial",
-  "version": "0.0.0",
-  "engines": {
-    "node": "6.10.3"
-  },
-  "private": true,
-  ...
-
- -

Database configuration

- -

So far in this tutorial we've used a single database that is hard coded into the app.js file. Normally we'd like to be able to have a different database for production and development, so next we'll modify the LocalLibrary website to get the database URI from the OS environment, and otherwise use our development database that we added manually earlier. Cloud Foundry has a very flexible services model that enables multiple services of the same type to exist in the environment. It stores all services related configurations in a single parseable JSON object called VCAP_SERVICES. A typical VCAP_SERVICES variable looks like this:

- -
{
- "VCAP_SERVICES": {
-  "mlab": [
-   {
-    "credentials": {
-     "uri": "mongodb://CloudFoundry_test_dev:somecr8zypassw0rd@dbhost.mlab.com:57971/CloudFoundry_dbname"
-    },
-    "label": "mlab",
-    "name": "node-express-tutorial-mongodb",
-    "plan": "sandbox",
-    "provider": null,
-    "syslog_drain_url": null,
-    "tags": [
-     "Cloud Databases",
-     "Developer Tools",
-     "Web-based",
-     "Data Store",
-    ],
-    "volume_mounts": []
-   }
-  ]
- }
-}
-
-
- -

Writing the code to extract and parse this environment variable is not hard, but it doesn't add a lot of value when others have written libraries to do this. In this case, there is a node.js package we can use called cfenv.

- -

This will download the cfenv module and its dependencies, and modify the package.json file as required. Open app.js and find the block with all the 'requires' that load the modules into your application. In this example look for the line that looks something like this:

- -
var expressValidator = require('express-validator');
- -

If you cannot find that exact line, look for the blocks of 'requires' and look for the last one. Add the following text after it:

- -
var cfenv = require('cfenv');
- -
    -
  1. -

    To install the package, go to your terminal and make sure you are in the directory where the package.json file for LocalLibrary is. From the command line, type:

    - - 
    npm install cfenv
    -
    2. -
  2. -

    Now that you have loaded the module, this next line will instantiate an object that will contain the app and services information required for deployment. Add the following after the line that contains app.use(helmet());

    - - 
    // Set up CF environment variables
-var appEnv = cfenv.getAppEnv();
-
    - -

    When this line executes, all the Cloud Foundry application environment information will become available to the application in the appEnv object.

    -
    3. -
  3. -

    Now it is time to update the application to use the database configured by the platform. Find the line that sets the mongoDB connection variable. It will look something like this:

    - - 
    var mongoDB = process.env.MONGODB_URI || dev_db_url;
    -
    4. -
  4. -

    You will now modify the line with the following code  appEnv.getServiceURL('node-express-tutorial-mongodb') to get the connection string from an environment variable that is being managed by the cfenv  module. If no service has been created and bound it will use your own database URL you created as part of the tutorial instead of the one from the environment. So replace the line above with the following:

    - - 
    var mongoDB = appEnv.getServiceURL('node-express-tutorial-mongodb') || dev_db_url;
-
    -
    5. -
  5. -

    Now run the site locally (see Testing the routes for the relevant commands) and check that the site still behaves as you expect. At this point your app is ready to use with Cloud Foundry and Pivotal Web Services.

    -
    6. -
- -

Get a Pivotal Web Services account

- -

To start using Pivotal Web Services you will first need to create an account (skip ahead to Create and upload the website if you've already got an account and have already installed the PWS cf CLI client).

- -
    -
  • Go to https://run.pivotal.io and click the SIGN UP FOR FREE button.
    • -
  • Enter your details and then press CREATE FREE ACCOUNT. You'll be asked to check your email for a sign-up email.
    • -
  • Click the account activation link in the signup email. You'll be taken back to your account on the web browser and you will complete the registration.
    • -
  • You will set your password and go through the rest of the new user sign up and how to claim your free trial account. Note you need a mobile phone to confirm your account. You will receive an "org" account funded with $87 of application usage credit. Note your email account can be in multiple orgs on PWS. This is similar to your user account on services like GitHub.
    • -
  • Go to https://console.run.pivotal.io and login in. You'll then be logged in and taken to the PWS dashboard: https://console.run.pivotal.io.
    • -
- -

Install the cf CLI client

- -

The cf CLI client is a software tool for managing and deploying your application. Download and install the PWS cf CLI client by following the instructions on Pivotal Web Services or downloading directly from GIthub. Be sure to download the correct version for your computer. After the client is installed you will be able run commands, for example to get help on the client:

- -
cf help
-
- -

We'll now go through the steps to login to PWS using the CLI and deploy — or in Cloud Foundry parlance "push" your app.

- -

Create and upload the website

- -

To create the app we navigate to the directory where our modified files are. This is the same directory where the LocalLibrary package.json file is located. First, let's tell the cf CLI which Cloud Foundry instance you want to use. We need to do this, since the cf CLI tool can be used with any standard Cloud Foundry system, so this command indicates which specific Cloud Foundry you are using. Enter the following terminal command now:

- -
cf api api.run.pivotal.io
- -

Next login using the following command (enter your email and password when prompted):

- -
cf login
-Email: enter your email
-Password: enter your password
- -

We can now push our app to PWS. In the below example. replace 'some-unique-name' with something you can remember that is likely to be unique. If it isn't unique, the system will let you know. The reason this name has to be unique to the PWS system is it is the address we will use to to access your LocalLibrary application. I used mozilla-express-tutorial-xyzzy. You should use something else.

- -
cf push some-unique-name -m 256MB
- -

Note the -m flag we added is not required. We just included it so that we only use 256MB of memory to run the app. Node apps typically can run in 128 MB, but we are being safe. If we didn't specify the memory, the CLI would use the default 1 GB of memory, but we want to make sure your trial lasts longer. You should now see a bunch of text on the screen. It will indicate that the CLI is uploading all your files, that it's using the node buildpack, and it will start the app. If we're lucky, the app is now "running" on the site at the URL https://some-unique-name.cfapps.io. Open your browser and run the new website by going to that URL.

- -
Note: The site will be running using our hardcoded development database at this time. Create some books and other objects, and check out whether the site is behaving as you expect. In the next section we'll set it to use our new database.
- -

Setting configuration variables

- -

You will recall from a preceding section that we need to set NODE_ENV to 'production' in order to improve our performance and generate less-verbose error messages.

- -
    -
  1. -

    Do this by entering the following command:

    - - 
    cf set-env some-unique-name NODE_ENV production
-
    -
    2. -
  2. -

    We should also use a separate database for production. Cloud Foundry can take advantage of a marketplace to create a new service and automatically bind it to your app. Bind means place the service database credentials in the environment variable space of the container running your application for you to access. Enter the following commands:

    - - 
    cf create-service mlab sandbox node-express-tutorial-mongodb
-cf bind-service some-unique-name node-express-tutorial-mongodb
-
    -
    3. -
  3. -

    You can inspect your configuration variables at any time using the cf env some-unique-name command — try this now:

    - - 
    cf env some-unique-name
-
    -
    4. -
  4. -

    In order for your applications to use the new credentials you will have to restage your application, meaning that it will restart and apply the new environment variables. This can be done using the following — enter this command now:

    - - 
    cf restage some-unique-name
-
    -
    5. -
  5. -

    If you check the home page now it should show zero values for your object counts, as the changes above mean that we're now using a new (empty) database.

    -
    6. -
- -

Debugging

- -

The PWS cf client provides a few tools for debugging:

- -
>cf logs some-unique-name --recent  # Show current logs
->cf logs some-unique-name # Show current logs and keep updating with any new results
- -

Summary

- -

If you followed the above steps, you should have now deployed the LocalLibrary app to PWS. Well done! If the deployment wasn't successful, double check all the steps.

diff --git a/files/zh-cn/orphaned/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html b/files/zh-cn/orphaned/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html new file mode 100644 index 0000000000..125d31931d --- /dev/null +++ b/files/zh-cn/orphaned/learn/server-side/express_nodejs/installing_on_pws_cloud_foundry/index.html @@ -0,0 +1,243 @@ +--- +title: 在 PWS/Cloud Foundry 上，安装 LocalLibrary +slug: orphaned/learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry +translation_of: Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry +original_slug: learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry +--- +
{{LearnSidebar}}
+ +

本文提供了如何在 Pivotal Web Services PaaS cloud 云上安装 LocalLibrary的实际演示 - 这是 Heroku 的全功能，开源替代品，Heroku 是我们教程第 7 部分中使用的 PaaS 云服务。如果您正在寻找 Heroku（或其他 PaaS 云服务）的替代方案，或者只是想尝试不同的东西，PWS / Cloud Foundry 绝对值得一试。

+ +

为什么是 PWS?

+ +

Pivotal Web Services 是开源云代工平台的公共实例。它是一个多语言平台，支持许多不同的语言，包括Node.js，Java，PHP，Python，Staticfiles 和 Ruby。它有一个免费试用版，对于运行 Node 应用程序非常有效！由于 Node 和 Express 是开源项目，因此与使用 Cloud Foundry 等开放式部署平台保持一致。您可以深入了解应用程序的托管方式。

+ +

使用PWS有多种原因！

+ +
    +
  • PWS具有灵活的定价，可以很好地适应 node 等小型运行。你可以用每月不到 5 美元的价格，运行一对冗余的应用程序。这包括备用故障转移系统，如果主服务器在任何时候出现故障，它将接管运行您的应用程序。
    • +
  • 作为PaaS，PWS为我们提供了大量的 Web 基础设施。这使得入门更加容易，因为您不必担心服务器、负载平衡器、反向代理、崩溃时重新启动网站，或者PWS 为我们提供的任何其他 Web 基础结构。
    • +
  • 因为 PWS 使用的是 Cloud Foundry，一个开放的平台。因此，您可以轻松地将应用程序，部署到其他 Cloud Foundry 提供商，例如 IBM BlueMix, AnyNines 和 Swisscomm Application Cloud。以下说明，适用于任何标准的 Cloud Foundry 部署，只需稍加修改即可。
    • +
  • 虽然它确实有一些限制，但这些不会影响这个特定的应用程序。例如： +
      +
    • PWS 和 Cloud Foundry 仅提供短期存储，因此用户上载的文件，无法安全地长期存储在 PWS 本身上。
      • +
    • 免费试用一年有效，限制最高 87美元的应用程序使用量。对于典型的 Node 应用程序，这意味着您可以运行一整年的应用程序。
      • +
    +
    • +
  • 大多数情况下它只是可以工作，如果你最终喜欢它，并希望升级，那么扩展你的应用程序非常容易。
    • +
  • PWS 和其他 Cloud Foundry 应用程序，可用于生产级别的应用程序。
    • +
+ +

PWS 是如何工作的？

+ +

PWS通过容器来运行网站和应用已经有些年头了。Cloud Foundry一开始采用的容器技术名为Warden，现在使用的是名为Garden的容器系统。这些技术与流行的Docker容器很相似，而且事实上Cloud Foundry云平台的很多设施都支持部署Docker容器。

+ +

使用Cloud Foundry云平台的好处之一是您不需要创建容器规范，因为Cloud Foundry的构建包会基于最新的组件来生成它们。由于容器是临时部署的，而且可能随时被清理并部署到云中的其他位置，所以Cloud Foundry云平台上的应用需要遵循十二要素准则。如此可以确保您的应用和平台使用最新的软件。一个应用程序可以包含多个实例，在这些实例中，应用程序被放置到冗余容器中，从而实现应用程序的高可用性。Cloud Foundry会自动处理相同实例之间的所有负载平衡。这允许您扩展应用程序的性能和可用性。

+ +

由于文件系统是临时的，所以任何临时存储或服务都应该使用备份服务放置到其他地方。这可以通过使用不同提供商提供的市场服务或通过用户自己提供的服务来实现。

+ +

What do we cover below?

+ +

This post covers how to modify the LocalLibrary application from the tutorial for deployment on PWS and Cloud Foundry. In doing so, it covers the basics of deploying any node.js application to PWS with the following steps.

+ +
    +
  • Configuring the package.json file to run with the engines available on PWS.
    • +
  • Adding and installing the 'cfenv' node module to make working with services easier.
    • +
  • Using the cfenv module to connect to a MongoDB instance from mLab that was created and bound using the PWS marketplace.
    • +
  • Using the cf CLI tool to create a new mongoDB service instance and bind it to the local library application.
    • +
  • How to set environment variables for Node using the cf CLI.
    • +
  • How to look at logs, again using the cf CLI tool.
    • +
+ +

So let's get started. You have two options, you can go through the tutorial from the beginning or you can just download the completed project and modify it from there for use on PWS. To do the latter, you can do the following from a terminal:

+ +
git clone https://github.com/mdn/express-locallibrary-tutorial
+ +

You'll then need to follow the preparation steps listed in the Getting your website ready to publish section of Express Tutorial Part 7: Deploying to production, before then following the steps listed below.

+ +
+

Note: This work flow is based on the Mozilla Heroku work flow in the main Express/Node tutorial series for consistency, to help readers compare and contrast. 

+
+ +

Modifying the LocalLibrary for PWS

+ +

Deployment of a Node application on Cloud Foundry takes the following steps. Using the downloaded 'cf' CLI tool on your environment, your source code and supporting metadata files are uploaded to Cloud Foundry which will assemble and package the components of your application. Note that your files need to be located on your system to deploy or as a zip archive somewhere accessible on the internet. We'll assume the former.

+ +

This means, no assumptions about which source control system is used. As long as you have a complete source tree in your local file system you can deploy the app. There are some things you have to make available to ensure the correctly assembly of your Node application. First Cloud Foundry cf CLI will look for the presence of the 'package.json' file to determine the dependencies and download the necessary components. The rules of this assembly are defined in Cloud Foundry's nodejs buildpack. An optional cloud foundry manifest file can specify information about your application such as name, size and start command if non-standard. In addition to deploying the application, the cf CLI tool can also configure services, set environment variables and view logs. That's all the overview you need in order to get started (see Getting Started on Pivotal Web Services for a more comprehensive guide). Let's start making the changes so you'll need to deploy the LocalLibrary application to  PWS.

+ +

Set node version

+ +

The package.json contains everything needed to work out your application dependencies and what file should be launched to start your site. Cloud Foundry and PWS detects the presence of this file, and will use it to provision your app environment. The only useful information missing in our current package.json is the version of node. We can find the version of node we're using for development by entering the command:

+ +
node --version
+# will return version e.g. v6.10.3
+ +

Open package.json with a text editor, and add this information as an engines > node section as shown (using the version number retrieved above).

+ +
{
+  "name": "express-locallibrary-tutorial",
+  "version": "0.0.0",
+  "engines": {
+    "node": "6.10.3"
+  },
+  "private": true,
+  ...
+
+ +

Database configuration

+ +

So far in this tutorial we've used a single database that is hard coded into the app.js file. Normally we'd like to be able to have a different database for production and development, so next we'll modify the LocalLibrary website to get the database URI from the OS environment, and otherwise use our development database that we added manually earlier. Cloud Foundry has a very flexible services model that enables multiple services of the same type to exist in the environment. It stores all services related configurations in a single parseable JSON object called VCAP_SERVICES. A typical VCAP_SERVICES variable looks like this:

+ +
{
+ "VCAP_SERVICES": {
+  "mlab": [
+   {
+    "credentials": {
+     "uri": "mongodb://CloudFoundry_test_dev:somecr8zypassw0rd@dbhost.mlab.com:57971/CloudFoundry_dbname"
+    },
+    "label": "mlab",
+    "name": "node-express-tutorial-mongodb",
+    "plan": "sandbox",
+    "provider": null,
+    "syslog_drain_url": null,
+    "tags": [
+     "Cloud Databases",
+     "Developer Tools",
+     "Web-based",
+     "Data Store",
+    ],
+    "volume_mounts": []
+   }
+  ]
+ }
+}
+
+
+ +

Writing the code to extract and parse this environment variable is not hard, but it doesn't add a lot of value when others have written libraries to do this. In this case, there is a node.js package we can use called cfenv.

+ +

This will download the cfenv module and its dependencies, and modify the package.json file as required. Open app.js and find the block with all the 'requires' that load the modules into your application. In this example look for the line that looks something like this:

+ +
var expressValidator = require('express-validator');
+ +

If you cannot find that exact line, look for the blocks of 'requires' and look for the last one. Add the following text after it:

+ +
var cfenv = require('cfenv');
+ +
    +
  1. +

    To install the package, go to your terminal and make sure you are in the directory where the package.json file for LocalLibrary is. From the command line, type:

    + + 
    npm install cfenv
    +
    2. +
  2. +

    Now that you have loaded the module, this next line will instantiate an object that will contain the app and services information required for deployment. Add the following after the line that contains app.use(helmet());

    + + 
    // Set up CF environment variables
+var appEnv = cfenv.getAppEnv();
+
    + +

    When this line executes, all the Cloud Foundry application environment information will become available to the application in the appEnv object.

    +
    3. +
  3. +

    Now it is time to update the application to use the database configured by the platform. Find the line that sets the mongoDB connection variable. It will look something like this:

    + + 
    var mongoDB = process.env.MONGODB_URI || dev_db_url;
    +
    4. +
  4. +

    You will now modify the line with the following code  appEnv.getServiceURL('node-express-tutorial-mongodb') to get the connection string from an environment variable that is being managed by the cfenv  module. If no service has been created and bound it will use your own database URL you created as part of the tutorial instead of the one from the environment. So replace the line above with the following:

    + + 
    var mongoDB = appEnv.getServiceURL('node-express-tutorial-mongodb') || dev_db_url;
+
    +
    5. +
  5. +

    Now run the site locally (see Testing the routes for the relevant commands) and check that the site still behaves as you expect. At this point your app is ready to use with Cloud Foundry and Pivotal Web Services.

    +
    6. +
+ +

Get a Pivotal Web Services account

+ +

To start using Pivotal Web Services you will first need to create an account (skip ahead to Create and upload the website if you've already got an account and have already installed the PWS cf CLI client).

+ +
    +
  • Go to https://run.pivotal.io and click the SIGN UP FOR FREE button.
    • +
  • Enter your details and then press CREATE FREE ACCOUNT. You'll be asked to check your email for a sign-up email.
    • +
  • Click the account activation link in the signup email. You'll be taken back to your account on the web browser and you will complete the registration.
    • +
  • You will set your password and go through the rest of the new user sign up and how to claim your free trial account. Note you need a mobile phone to confirm your account. You will receive an "org" account funded with $87 of application usage credit. Note your email account can be in multiple orgs on PWS. This is similar to your user account on services like GitHub.
    • +
  • Go to https://console.run.pivotal.io and login in. You'll then be logged in and taken to the PWS dashboard: https://console.run.pivotal.io.
    • +
+ +

Install the cf CLI client

+ +

The cf CLI client is a software tool for managing and deploying your application. Download and install the PWS cf CLI client by following the instructions on Pivotal Web Services or downloading directly from GIthub. Be sure to download the correct version for your computer. After the client is installed you will be able run commands, for example to get help on the client:

+ +
cf help
+
+ +

We'll now go through the steps to login to PWS using the CLI and deploy — or in Cloud Foundry parlance "push" your app.

+ +

Create and upload the website

+ +

To create the app we navigate to the directory where our modified files are. This is the same directory where the LocalLibrary package.json file is located. First, let's tell the cf CLI which Cloud Foundry instance you want to use. We need to do this, since the cf CLI tool can be used with any standard Cloud Foundry system, so this command indicates which specific Cloud Foundry you are using. Enter the following terminal command now:

+ +
cf api api.run.pivotal.io
+ +

Next login using the following command (enter your email and password when prompted):

+ +
cf login
+Email: enter your email
+Password: enter your password
+ +

We can now push our app to PWS. In the below example. replace 'some-unique-name' with something you can remember that is likely to be unique. If it isn't unique, the system will let you know. The reason this name has to be unique to the PWS system is it is the address we will use to to access your LocalLibrary application. I used mozilla-express-tutorial-xyzzy. You should use something else.

+ +
cf push some-unique-name -m 256MB
+ +

Note the -m flag we added is not required. We just included it so that we only use 256MB of memory to run the app. Node apps typically can run in 128 MB, but we are being safe. If we didn't specify the memory, the CLI would use the default 1 GB of memory, but we want to make sure your trial lasts longer. You should now see a bunch of text on the screen. It will indicate that the CLI is uploading all your files, that it's using the node buildpack, and it will start the app. If we're lucky, the app is now "running" on the site at the URL https://some-unique-name.cfapps.io. Open your browser and run the new website by going to that URL.

+ +
Note: The site will be running using our hardcoded development database at this time. Create some books and other objects, and check out whether the site is behaving as you expect. In the next section we'll set it to use our new database.
+ +

Setting configuration variables

+ +

You will recall from a preceding section that we need to set NODE_ENV to 'production' in order to improve our performance and generate less-verbose error messages.

+ +
    +
  1. +

    Do this by entering the following command:

    + + 
    cf set-env some-unique-name NODE_ENV production
+
    +
    2. +
  2. +

    We should also use a separate database for production. Cloud Foundry can take advantage of a marketplace to create a new service and automatically bind it to your app. Bind means place the service database credentials in the environment variable space of the container running your application for you to access. Enter the following commands:

    + + 
    cf create-service mlab sandbox node-express-tutorial-mongodb
+cf bind-service some-unique-name node-express-tutorial-mongodb
+
    +
    3. +
  3. +

    You can inspect your configuration variables at any time using the cf env some-unique-name command — try this now:

    + + 
    cf env some-unique-name
+
    +
    4. +
  4. +

    In order for your applications to use the new credentials you will have to restage your application, meaning that it will restart and apply the new environment variables. This can be done using the following — enter this command now:

    + + 
    cf restage some-unique-name
+
    +
    5. +
  5. +

    If you check the home page now it should show zero values for your object counts, as the changes above mean that we're now using a new (empty) database.

    +
    6. +
+ +

Debugging

+ +

The PWS cf client provides a few tools for debugging:

+ +
>cf logs some-unique-name --recent  # Show current logs
+>cf logs some-unique-name # Show current logs and keep updating with any new results
+ +

Summary

+ +

If you followed the above steps, you should have now deployed the LocalLibrary app to PWS. Well done! If the deployment wasn't successful, double check all the steps.

diff --git a/files/zh-cn/web/api/beacon_api/using_the_beacon_api/index.html b/files/zh-cn/web/api/beacon_api/using_the_beacon_api/index.html deleted file mode 100644 index c65861c7cd..0000000000 --- a/files/zh-cn/web/api/beacon_api/using_the_beacon_api/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: 使用 Beacon API -slug: Web/API/Beacon_API/Using_the_Beacon_API -tags: - - Web 性能 - - 指南 -translation_of: Web/API/Beacon_API/Using_the_Beacon_API ---- -
{{DefaultAPISidebar("Beacon")}}{{SeeCompatTable}}
- -

Beacon 接口用来调度向 Web 服务器发送的异步非阻塞请求。

- -
    -
  • Beacon 请求使用 HTTP POST 方法，并且不需要有响应。
    • -
  • Beacon 请求能确保在页面触发 unload 之前完成初始化。
    • -
- -

这篇文档包含了 Beacon 接口的一些例子，可以在 {{domxref("Beacon_API","Beacon API")}} 查阅对应的 API。

- - - -

Beacon API 的 {{domxref("Navigator.sendBeacon()")}} ，会在全局上下文中向服务器发起一个 beacon 请求。这个方法需要两个参数:  URL 以及要发送的数据 data 。其中 data 参数是可选的，它的类型可以为 {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, 或者 {{domxref("FormData")}}.

- -

如果浏览器成功地将 beacon 请求加入到待发送的队列里，这个方法将会返回 true ，否则将会返回 false 。

- -

下面的例子注册了 {{event("load")}} 事件和  {{event("beforeunload")}} 事件的回调函数， 并且在回调函数里面调用了 sendBeacon() 方法。

- -
window.onload = window.onunload = function analytics(event) {
-  if (!navigator.sendBeacon) return;
-
-  var url = "https://example.com/analytics";
-  // 创建待发送数据
-  var data = "state=" + event.type + "&location=" + location.href;
-
-  // 发送beacon请求
-  var status = navigator.sendBeacon(url, data);
-
-  // 打印数据以及结果
-  console.log("sendBeacon: URL = ", url, "; data = ", data, "; status = ", status);
-};
-
- -

接下来的例子创建了一个 {{event("submit")}} 事件的回调函数，并且当submit事件触发时，调用 sendBeacon()方法。

- -
window.onsubmit = function send_analytics() {
-  var data = JSON.stringify({
-    location: location.href,
-    time: Date()
-  });
-
-  navigator.sendBeacon('/analytics', data);
-};
-
- -

WorkerNavigator.sendBeacon()

- -

Beacon API 的 {{domxref("WorkerNavigator.sendBeacon()")}} 的使用方法，跟平常的使用方法完全相同，区别仅在与这个方法存在 {{domxref("WorkerGlobalScope","worker 全局作用域")}} 中

- -

接下来的例子展示了，使用  {{domxref("Worker")}} 发送了一个 beacon 请求，使用了全局上下文的 URL 和数据。

- -

这是全局上下文的代码片段:

- -
function worker_send(url, data) {
-  // 创建 worker 对象
-  var myWorker = new Worker("worker-using.js");
-
-  // 向 worker 发送 URL 以及 data
-  myWorker.postMessage([url, data]);
-
-  // 注册回调函数接收来自 worker 的成功或失败信息
-  myWorker.onmessage = function(event) {
-    var msg = event.data;
-    // 打印 worker 的发送状态
-    console.log("Worker reply: sendBeacon() status = " + msg);
-  };
-}
-
- -

这是 worker 中的代码片段 (worker-using.js):

- -
onmessage = function(event) {
-  var msg = event.data;
-  // 从 msg 中分离 URL 和 data
-  var url = msg[0];
-  var data = msg[1];
-
-  // 如果浏览器支持在 worker 里面调用 sendBeacon()， 那就发送beacon请求
-  // 否则返回失败信息给全局上下文
-  if (self.navigator.sendBeacon) {
-    var status = self.navigator.sendBeacon(url, data);
-    postMessage(status ? "success" : "fail");
-  } else {
-    postMessage("Worker: self.navigator.sendBeacon is unsupported");
-  }
-}
-
- -

查看更多

- - -- cgit v1.2.3-54-g00ecf