docker vue_vue向docker表达节点mysql venomy

docker vue

Venomy my mnemonic for vue-express-node-mysql. After building several vuejs projects, I wanted a way to scaffold SPAs faster. I built this boilerplate for deployment of my apps to docker fast. This post will focus more on the deployment of the stack than on the actual application code. At the end of this post I will provide links to the github repository.

Venomy我的vue-express-node-mysql助记符。 构建了多个vuejs项目之后，我想要一种更快地构建SPA的方法。 我构建了该样板，用于将应用程序快速部署到docker。 这篇文章将更多地关注堆栈的部署，而不是实际的应用程序代码。 在本文的结尾，我将提供指向github存储库的链接。

生成节点应用 (Generating the node app)

Lets do quick run of how the application code was generated : The application code is made up of the server app (nodeapp) which will be hosted on production and the client vuejs app. The server app was generated with yoeman express generator. The commands to get yeoman and generate the app as follows

让我们快速运行应用程序代码的生成方式：该应用程序代码由将托管在生产环境中的服务器应用程序(nodeapp)和客户端vuejs应用程序组成。 服务器应用程序是使用yoeman express生成器生成的。 获取yeoman并生成应用的命令如下

npm install -g yo
npm install -g generator-express
yo nodeapp

The client app was generated with using vue-cli. Commands to get vue-cli and generate the app :

客户端应用是使用vue-cli生成的。 获取vue-cli并生成应用的命令：

npm install -g @vue/cli
vue create client

The client vue app will be making api calls to the nodeapp(server) over cors. You can client app by running

客户端vue应用将通过cors对nodeapp(server)进行api调用。 您可以通过运行客户端应用程序

cd client
npm run serve

which will lister on port 8080. With hot reloading any changes made to the client app reflects immediately. To run the server app :

它将在端口8080上列出程序。通过热重载，对客户端应用程序所做的任何更改都会立即反映出来。 要运行服务器应用程序：

cd nodeapp
npm start ## listening on port 3000

So we have an expressjs backend and a vuejs frontend working together. Cool!! but we can’t host the 2 apps separately so we have to merge them for production.

因此，我们有一个expressjs后端和一个vuejs前端一起工作。 凉！！ 但是我们不能单独托管这两个应用程序，因此我们必须将它们合并以进行生产。

合并应用以进行生产 (Merging the apps for production)

To prepare the app for production we are going to merge the client app into the server backend. By default when you run npm run build in the client directory it publishes into a dist folder. We are going to configure the client to publish into the public directory of our server app. In vuejs you can create a vue.config.js file to handle this kind of configurations, you learn more about this here https://cli.vuejs.org/config/#vue-config-js. Create a vue.config.js file and paste the following code :

为了准备将应用程序投入生产，我们将把客户端应用程序合并到服务器后端。 默认情况下，当您在客户端目录中运行npm run build ，它将发布到dist文件夹中。 我们将配置客户端以发布到服务器应用程序的公共目录中。 在vuejs中，您可以创建一个vue.config.js文件来处理这种配置，您可以在https://cli.vuejs.org/config/#vue-config-js了解更多信息。 创建一个vue.config.js文件并粘贴以下代码：

const path = require('path');
    module.exports = {
        outputDir: path.resolve(__dirname,'../nodeapp/public'),
        devServer:{
            proxy:{
                '/api':{
                    target: 'http://localhost:3000'
                }
            }
        }
    }

The path configuration allows the client to call the server backend on a seprate port only on development machine.

路径配置允许客户端仅在开发计算机上的单独端口上调用服务器后端。

使用docker部署应用程序。 (Deploying the app with docker.)

Now to the meat of matter. How do we dploy to a docker container. Lets create a docker file in the root of our application. Structure of project as follows:venomy directory

现在到物质的肉。 我们如何部署到Docker容器。 让我们在应用程序的根目录中创建一个docker文件。 项目结构如下： venomy directory

Dockerfile
    -nodeapp
        -app
        -config
        -public
        -app.js
        -package.json
     -client
        -public
        -src
        -package.json
     -node.dockerfile
     -docker-compose.yml

By default docker files should be name Dockerfile to be automatically loaded by docker compose but we are ninjas we can choose any name and specify that in the compose file so lets call the compose file node.dockerfile. Our docker file will contain definitions for building the node app into a container. Lets go over our node.dockerfile explaining each line in a comment. Comments in docker file begin with #

默认情况下， Dockerfile文件的名称应为Dockerfile ，由Dockerfile自动加载，但我们是忍者，我们可以选择任何名称并在compose文件中指定该名称，因此可以调用compose文件node.dockerfile 。 我们的docker文件将包含用于将节点应用构建到容器中的定义。 让我们遍历node.dockerfile解释注释中的每一行。 码头工人文件中的注释以＃开头

FROM node:12.18.3-alpine3.10   #using node version 12 from alpine image. Tip:alpine images and smaller in size recommended
LABEL author="brudex:Penrose"  #Specifying the author. Yours truly
    ENV NODE_ENV=production        #Setting or node environment to production. To be read in the nodeapp
    ENV PORT=3000                  #Set the port environment variable to 3000. To be read in the nodeapp
    COPY      nodeapp /var/www     #Copying the contents of nodeapp our application to /var/www in the container
    WORKDIR   /var/www/            #Set our workding directory to /var/www, Context to run subsequent commands
    RUN       npm install          #Install npm modules
    EXPOSE $PORT                   #Expose port 3000 defined above
    ENTRYPOINT ["npm", "start"]    # Run the app

Next up we create our docker-compose file. Our docker compose file will contain definitions for building our node service, adding a mysql database and a phpmyadmin server for administering our mysql database. I know phpmyadmin is old school but it works with mysql better than any web database administrator.

接下来，我们创建我们的docker-compose文件。 我们的docker compose文件将包含用于构建节点服务，添加mysql数据库和phpmyadmin服务器以管理我们的mysql数据库的定义。 我知道phpmyadmin很老，但是它比任何Web数据库管理员都更适合mysql。

version: '3.3'
    services:
    node:
        container_name: nodeapp
        build:
            context: .
            dockerfile: node.dockerfile
        ports:
          - "3000:3000"
        networks:
          - nodeapp-network
        depends_on:
          - mysql
    mysql:
        image: mysql/mysql-server:5.7
        container_name: mysql
        networks:
          - nodeapp-network
        environment:
            MYSQL_DATABASE: nodeapp
            MYSQL_USER: admin
            MYSQL_PASSWORD: pass
            MYSQL_ROOT_PASSWORD: my@secret-root
    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        container_name: pma
        links:
          - mysql
        external_links:
          - db_server:mysql
        ports:
          - "8183:80"
        networks:
          - nodeapp-network
        environment:
            PMA_HOST: mysql
            PMA_HOSTS: mysql
            PMA_PORT: 3306
            PMA_ARBITRARY: 1
    networks:
      nodeapp-network:
        driver: bridge

We are using version 3.3 of docker compose, every compose file must choose from a range of versions 1.0 to 3.8 more about that here. There are 3 services defined in our docker compose file : node (our node app), mysql (our database), phpmyadmin (web db admin).

我们使用泊坞窗撰写的3.3版本，每一个撰写文件必须从各种版本的选择1.0到3.8更多关于这里 。 在我们的docker compose文件中定义了3种服务：节点(我们的节点应用程序)，mysql(我们的数据库)，phpmyadmin(网络数据库管理员)。

节点服务 (node service)

The node service is built from the `node.dockerfile`. The container is given a name `nodeapp`. Port 3000 is exposed to be accessible from outside the container. All 3 services is joined to nodeapp-network using a bridge driver.

mysql服务 (mysql service)

The mysql servic is the database service. It is pulled from the official mysql service version 5.7 on docker hub.
  MYSQL_DATABASE: nodeapp # Creates and initial database when the container starts
  MYSQL_USER: admin       # Creates an initial user when the database starts
  MYSQL_PASSWORD: pass    # Creates a password for the admin user
  MYSQL_ROOT_PASSWORD: my@secret-root # Create a password for the root user

phpmyadmin服务 (phpmyadmin service)

Phpmyadmin is used as the web admin service, built from the official phpmyadmin service on docker hub. It opens a login  page on launch. You can enter the followign values to login base on our mysql service configuration.
  `Server : mysql
  `Username : admin
  `Password : pass

We are now set to host our service in docker. This tutorial did not focus on installing and setting up docker but there many resources on the web that teach that. To lauch our service, on the command line in the venomy directory type :

现在，我们将在docker中托管我们的服务。 本教程并不侧重于安装和设置docker，但网络上有许多资源可以教导这一点。 要启动我们的服务，请在venomy目录的命令行上输入：

`docker-compose up`

The will build the service and lauch all containers simultaneosly. If you have issues with your node app conncecting to the mysql service. Stop the service with control + c and rerun docker-compose up again. This is an issue with docker starting all services at once so mysql does not finish initializing before the node app tries to connect. You can do a setTimeout to launch the node server after 30 seconds to subvert this. The code for this tutorial is hosted on github : https://github.com/brudex/venomy

将会建立服务并同时清空所有容器。 如果您的节点应用程序连接到mysql服务时遇到问题。 使用control + c停止服务，然后重新运行docker-compose up 。 这是docker立即启动所有服务的问题，因此mysql在节点应用尝试连接之前不会完成初始化。 您可以执行setTimeout在30秒后启动节点服务器以颠覆它。 本教程的代码托管在github上： https : //github.com/brudex/venomy

翻译自: https://medium.com/@brudex/vue-express-node-mysql-venomy-to-docker-8b4c525a9682

docker vue