概述
我尝试在Google App Engine的灵活环境中将Nuxt.js SSR应用程序部署为服务。
Nuxt.js在Mac上使用Docker创建了一个开发环境，使用
已经有一篇不错的文章可以实现上述目的，但是我将其总结为一个过程。
如果您有相同的爱好，请参考它^^
什么是Nuxt.js？
从Vue.js制作的Nuxt.js框架开始的通用应用程序开发
https://html5experts.jp/potato4d/24346/
Nuxt.js(发音为Nuxt)是一个基于Vue.js的框架，其灵感来自Next.js，后者是一个基于React.js的SSR框架。
它是
。
步骤
Docker环境构建
假定已安装Docker。
对于环境建设，我极大地参考了以下内容。谢谢！
开始使用Nuxt.js而不用Docker污染您的本地环境
https://qiita.com/ProjectEuropa/items/d9ee1b8c96084e3bab55
请参阅以上文章，以获取
docker-compose.yml和Dockerfile的描述。
1 2 3 4 | > mkdir 任意のディレクトリ > cd 任意のディレクトリ > vi docker-compose.yml > vi Dockerfile |
如果
docker-compose的版本为1，则需要更改
那是版本1
1 2 3 4 5 6 | > docker-compose version docker-compose version 1.22.0, build f46880f docker-py version: 3.4.1 CPython version: 3.6.4 OpenSSL version: OpenSSL 1.0.2o 27 Mar 2018 |
参考)
撰写文件参考
http://docs.docker.jp/compose/compose-file.html
版本1格式使用的生成方式有所不同
docker-compose.yml
1 2 3 | - build: - context: ./ + build: ./ |
使用
，启动docker容器并输入Web容器。
1 2 3 4 5 6 7 8 9 | > docker-compose build (略) > docker-compose up -d (略) > docker-compose exec web bash [root@xxxxxxxxxxx html]# |
创建并检查Nuxt应用程序
的操作
成功将其放入容器后，我们将创建一个nuxt应用程序。
这次，我们将使用TypeScript和SCSS。
我极大地参考了以下文章。谢谢！
Nuxt.js TypeScript Sass ESLint入门
https://qiita.com/ryota-yamamoto/items/4b06ef51926df1bdbae8
在容器中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | > npm install yarn -g /usr/bin/yarn -> /usr/lib/node_modules/yarn/bin/yarn.js /usr/bin/yarnpkg -> /usr/lib/node_modules/yarn/bin/yarn.js + [email protected] added 1 package in 1.137s > vue -V 2.9.6 > vue init nuxt-community/typescript-template nuxt-sample vue-cli · Generated "nuxt-sample". To get started: cd nuxt-sample npm install # Or yarn npm run dev > cd nuxt-sample/ > yarn (略) > yarn add --dev node-sass sass-loader (略) |
在Nuxt应用程序中更改描述以使其成为SCSS。
组件/ Card.vue
1 2 | -<style scoped> +<style lang="scss" scoped> |
页面/ index.vue
1 2 | -<style scoped> +<style lang="scss" scoped> |
重命名配置文件和main.css。
nuxt.config.js
1 2 | - css: ["~/assets/css/main.css"], + css: ["~/assets/css/main.scss"], |
在容器中
1 | > mv assets/css/main.css assets/css/main.scss |
现在您已经准备好，让我们启动该应用程序。
在容器中
1 2 3 4 5 6 7 8 9 | > yarn run dev (略) OPEN http://localhost:3000 nuxt:render Rendering url / +0ms nuxt:render Data fetching /: 179ms +0ms nuxt:render Rendering url / +13s nuxt:render Data fetching /: 33ms +12s |
是的。
现在，当您从主机访问以下内容时，应该会看到该页面。
1 | open http://localhost:3000/ |
我做到了。
部署到Google App Engine
从这里，我们将其部署到Google App Engine。
有关安装
*这次您不需要安装Node.js。
下载App Engine的SDK
https://cloud.google.com/appengine/docs/flexible/nodejs/download
有关GCP项目和部署所需的设置，请参阅以下内容。
GCP项目，App Engine应用程序，计费管理
https://cloud.google.com/appengine/docs/flexible/nodejs/managing-projects-apps-billing
Nuxt应用程序内部版本
构建用于部署的Nuxt应用。
在容器中
1 2 3 4 5 6 7 8 9 | > yarn run build yarn run v1.9.4 $ nuxt build (略) Asset Size Chunks Chunk Names server-bundle.json 189 kB [emitted] nuxt:build Building done +2m Done in 141.32s. |
部署设置
对于部署到Google App Engine，我参考了以下内容。谢谢！
Google App Engine(GAE)上的Nuxt.js
https://qiita.com/SatoTakumi/items/4f418dc5c700b9d66d7d
进行设置以部署到Google App Engine。
不管在容器内还是容器外进行这项工作都没有关系。
Google App Engine在package.json中查看
package.json
1 2 | - "start": "nuxt start", + "start": "HOST=0.0.0.0 PORT=8080 nuxt start", |
另外，要在Google App Engine的灵活环境中指定运行时，请在package.json中指定节点版本。让我们将其添加到文件末尾。
package.json
1 2 3 4 5 | - } + }, + "engines": { + "node": "9.x" + } |
添加部署Google App Engine所需的app.yaml。将其直接放在Nuxt应用程序目录下。
1 | touch app.yaml |
如果要部署到现有的GCP项目，请指定
如果未指定，则部署到
将
app.yaml
1 2 3 4 | runtime: nodejs env: flex # プロジェクトに初めてデプロイする場合は下記設定は不要 service: 任意のサービス名 |
部署到Google App Engine
现在您已经准备好，进行部署。
让我们在容器外工作。
容器外
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | > gcloud app deploy Services to deploy: descriptor: [任意のディレクトリ/nuxt-sample/app.yaml] source: [任意のディレクトリ/nuxt-sample] target project: [GCPのプロジェクトID] target service: [サービス名] target version: [20180810t135530] target url: [https://サービス名-dot-GCPのプロジェクトID.appspot.com] (略) Deployed service [サービス名] to [https://サービス名-dot-GCPのプロジェクトID.appspot.com] You can stream logs from the command line by running: $ gcloud app logs tail -s サービス名 To view your application in the web browser run: $ gcloud app browse -s サービス名 Updates are available for some Cloud SDK components. To install them, please run: $ gcloud components update |
是的。
现在，让我们访问上面的URL。
1 | https://サービス名-dot-GCPのプロジェクトID.appspot.com |
我做到了。
最后，当您不再需要该服务时，请从GCP管理控制台中删除该服务。
然后，在具有良好TypeScript和SCSS的Docker容器上开发Nuxt.js，并在App Engine ^^上部署生命(长
参考
从Vue.js制作的Nuxt.js框架开始的通用应用程序开发
https://html5experts.jp/potato4d/24346/
开始使用Nuxt.js而不用Docker污染您的本地环境
https://qiita.com/ProjectEuropa/items/d9ee1b8c96084e3bab55
撰写文件参考
http://docs.docker.jp/compose/compose-file.html
Nuxt.js TypeScript Sass ESLint入门
https://qiita.com/ryota-yamamoto/items/4b06ef51926df1bdbae8
Google App Engine(GAE)上的Nuxt.js
https://qiita.com/SatoTakumi/items/4f418dc5c700b9d66d7d
Node.js运行时
https://cloud.google.com/appengine/docs/flexible/nodejs/runtime
下载App Engine的SDK
https://cloud.google.com/appengine/docs/flexible/nodejs/download
有关GCP项目和部署所需的设置，请参阅以下内容。
GCP项目，App Engine应用程序，计费管理
https://cloud.google.com/appengine/docs/flexible/nodejs/managing-projects-apps-billing
NPM vs纱线备忘单
https://shift.infinite.red/npm-vs-yarn-cheat-sheet-8755b092e5cc
使用Vue.js TypeScript开发时的参考文章摘要
https://qiita.com/kai_kou/items/19b494a41023d84bacc7