部署时的困扰

使用 Nuxt 开发的项目 build 后上传到服务器时，每次都要选中 .nuxt、static、sitemap.js、nuxt.config.js、package-lock.json、package.json、Dockerfile 这些必要文件复制到一个文件夹再上传，十分麻烦。于是再闲余时间简单写了一个 deploy 脚本用于把这些文件复制到 deploy 目录。

部署最佳实践

新建 deploy.sh

在项目根目录新建 deploy.sh，目的是将 build 后所用到的文件复制到自定义的 deploy 目录（该目录用于上传到服务器）。

#!/usr/bin/env shset -eecho "> npm run build"
npm run buildif [ ! -d "deploy" ]; thenecho "> create deploy folder"mkdir deployelse echo "> remove old deploy files"rm -rf deploy/*
fiecho "> copy deploy files（以下复制源码中所用上的文件）"
cp -r .nuxt ./deploy/
cp -r static ./deploy/
cp -r nuxt.config.js ./deploy/
cp -r package-deploy.json ./deploy/
cp -r Dockerfile ./deploy/echo "  finish!"
sleep 120s

新增 NPM Script

在项目的原 package.json 文件，追加运行脚本（“deploy”: “deploy.sh”），该脚本用于运行 deploy.sh。

{"name": "app","version": "1.0.0","private": true,"scripts": {"dev": "nuxt","build": "nuxt build","start": "nuxt start","generate": "nuxt generate","deploy": "deploy.sh" // 运行 deploy 脚本},"dependencies": {"@nuxtjs/axios": "^5.13.6","@nuxtjs/sitemap": "^2.4.0","axios": "^0.21.1","core-js": "^3.9.1","nuxt": "^2.15.3",},"devDependencies": {"@nuxtjs/google-analytics": "^2.4.0","autoprefixer": "^9.8.6","less": "^3.13.1","less-loader": "^5.0.0","postcss": "^7.0.35",}
}

新增 Dockerfile（可选）

有用到 Docker 的可以参考新增的 Dockerfile 文件。

FROM node:14.4.0
RUN mkdir -p /app
COPY . /app
WORKDIR /app
EXPOSE 3000
RUN npm install
CMD ["npm","run","start"]

打包和部署

打开项目，在本地环境依次执行命令：

npm run build
npm run deploy

命令执行完后，可以看到项目多了 deploy 目录，把这个目录上传到服务器，执行 Dockerfile，或者在服务器环境中执行如下命令：

npm install
npm run start

这样项目就部署好了。

Nuxt SSR 部署实践相关推荐

nuxt / ssr简介以及要不要使用服务端渲染（SSR）?
nuxt / ssr 简介 ssr 是 vue 的服务端渲染技术 nuxt 是一个可以用来做 ssr 服务端渲染开发的框架他们之间的关系, ssr 是技术基础, nuxt 是封装什么是SSR? ...
TVM优化c++部署实践
TVM优化c++部署实践使用TVM导入神经网络模型: 模型支持pytorch , tensorflow , onnx, caffe 等.平时pytorch用的多,这里给一种pytorch的导入方式. ...
nuxt静态部署_nuxt静态部署打包相对路径操作
以往在nuxt项目中,打包静态化部署的的文件如下: 路径为绝对路径,当项目的域名为二级域名的时候,就不能打包为这绝对路径了. nuxt不同于vue项目,思索了许久,终于找到了配置的地方: nuxt项目 ...
容器化部署实践之Django应用部署（二）
上一篇文章有些同学感觉不够详细理解起来有些困难,我再来简单解释一下. 我们在开发的情况下: 浏览器请求→ python manage.py runserver(比如8000) → 到应用代码( ...
基于 Docker 和 GitLab 的前端自动化部署实践笔记
基于 Docker 和 GitLab 的前端自动化部署实践笔记随着接触的项目越来越多,在部署测试流程上重复耗时工作也越来越多,所以对前端工作的CI/CD实现愈发迫在眉睫. 前端开发由于三大框架的崛 ...
centos 安装mysql5.7_Zabbix 4.2.5 安装部署实践详解
[导读]云计算背景下,无论是大数据.物联网还是边缘计算,规模化后大量的设备需要保证正常运行,在人员一定的情况下,就需要提高运行维护效率.同时随着智能化被应用在人们生活的方方面面,关联性也越来越紧密,即 ...
网易云海外推流部署实践
谈到直播,实时性和流畅性一直是整个服务体系中的重中之重.本文是网易云通信视频技术开发工程师何荣光在LiveVideoStack Meet杭州站沙龙的分享,着重梳理网易云在海外推流方面的部署实践,帮助开 ...
tftp 服务器 ip_360Stack裸金属服务器部署实践
女主宣言裸金属特性是一种将物理设备作为资源提供给租户的云计算服务,租户通过该服务可申请.管理和配置相应的物理设备资源,本文将介绍360Stack裸金属服务器的部署实践. PS:丰富的一线技术.多元化 ...
阿里P8架构师谈：Quartz调度框架详解、运用场景、与集群部署实践
以下将分别从Quartz架构简介.集群部署实践.Quartz监控.集群原理分析详解Quartz任务调度框架. Quartz简介 Quartz是Java领域最著名的开源任务调度工具,是一个任务调度框架, ...
时空大数据实践之GeoWave安装部署实践
2019独角兽企业重金招聘Python工程师标准>>> 时空大数据实践之GeoWave安装部署实践 GeoWave是由国家地理空间情报局(NGA)与RadiantBlue和Booz ...

Nuxt SSR 部署实践