子非鱼
0%

Vue3前端开发部署备忘录

发表于 更新于 分类于
Vue开发Web网站备忘录

Docker开发环境

Docker Ubuntu

pull镜像

1
2
3
docker pull ubuntu
docker run --name iubuntu -t -i -d ubuntu
docker exec -t -i iubuntu /bin/bash

安装配置ssh

1
2
3
4
5
6
7
8
9
10
11
12
13
apt-get update
apt-get dist-upgrade
apt-get install -y vim
apt-get install -y sudo vim git net-tools rsync sudo iputils-ping openssh-client openssh-server  xdg-utils xz-utils

/etc/init.d/ssh start
ps -e|grep ssh
vim /etc/ssh/sshd_config
PermitRootLogin yes
service ssh restart
passwd root
Lindao123456
exit

清理缓存

1
2
3
apt-get clean
apt-get autoclean
apt-get autoremove

配置Docker-Ubuntu的中文环境

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
locale -a
apt-get update
apt-get install -y sudo
apt-get install -y locales
apt-get install -y language-pack-zh-hans
locale-gen zh_CN
locale-gen zh_CN.utf8
locale-gen zh_CN.UTF-8
locale-gen zh_CN.GB18030

#看看当前启用的本地支持
locale -a
export LANG=zh_CN.UTF-8
export LC_ALL=zh_CN.UTF-8
export LANGUAGE=zh_CN.UTF-8

#现在来看看当前的字符集
locale

sudo update-locale LANG=zh_CN.UTF-8 LC_ALL=zh_CN.UTF-8 LANGUAGE=zh_CN.UTF-8
cat /etc/default/locale

vscode-web

1
2
apt-get install curl
curl -fsSL https://code-server.dev/install.sh | sh
1
2
3
4
5
6
7
code-server --port 6001 --host 0.0.0.0 --auth password
vim  ~/.config/code-server/config.yaml

bind-addr: 0.0.0.0:6001
auth: password
password: 1234567890
cert: false

Node.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
cd opt
wget https://registry.npmmirror.com/-/binary/node/v16.14.2/node-v16.14.2-linux-x64.tar.xz
tar -xvf node-v16.14.2-linux-x64.tar.xz
rm -rf node-v16.14.2-linux-x64.tar.xz

# 软链接
ln -s /opt/node-v16.14.2-linux-x64/bin/node /usr/local/bin
ln -s /opt/node-v16.14.2-linux-x64/bin/npm /usr/local/bin
node -v
npm -v
# 淘宝镜像
npm config set registry https://registry.npm.taobao.org
npm install -g npm@8.10.0

# pnpm
npm install -g pnpm@next-7
ln -s /opt/node-v16.14.2-linux-x64/bin/pnpm /usr/local/bin
ln -s /opt/node-v16.14.2-linux-x64/bin/pnpx /usr/local/bin
1
2
npx npm-check-updates
npx npm-check-updates -u

Python 开发环境

  • https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/
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
28
29
30
31
wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh
bash Miniconda3-latest-Linux-x86_64.sh 
bash
/opt/miniconda3
conda config --set show_channel_urls yes
vim ~/.condarc

channels:
  - defaults
show_channel_urls: true
default_channels:
  - https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main
  - https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/r
  - https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/msys2
custom_channels:
  conda-forge: https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud
  msys2: https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud
  bioconda: https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud
  menpo: https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud
  pytorch: https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud
  pytorch-lts: https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud
  simpleitk: https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud

conda update conda -y
conda update python -y
pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
pip install pip -U

conda clean -p      //删除没有用的包（推荐）
conda clean -t      //tar打包
conda clean -y -all //删除全部的安装包及cache

生成镜像启动容器

1
2
3
4
5
6
7
8
docker commit iubuntu ubuntu-dev
docker save ubuntu-dev > ubuntu-dev.tar
docker load < ubuntu-dev.tar
docker run --name web-dev -t -i -d -p 6000:22 -p 6001:6001 -p 6002:6002 -p 6003:6003 -p 6004:6004 ubuntu-dev /usr/sbin/sshd -D
docker exec -t -i web-dev /bin/bash

# 启动 web-vue
code-server --port 6001 --host 0.0.0.0 --auth password

docker network

1
2
3
4
5
6
docker network create webnet
docker network connect --alias mysql webnet mysql
docker network connect --alias web-dev webnet web-dev
docker network ls
docker network inspect webnet
docker inspect --format '{{ .NetworkSettings.IPAddress }}' $(docker ps -q)

Web部署

Falsk

1
2
3
4
5
6
7
8
9
10
pip install flask
pip install flask_cors
pip install python_dateutil
pip install numpy
pip install pandas
pip install pymysql
pip install scipy
pip install pyjwt
pip install pycryptodome
pip install sqlalchemy

Web Server Gateway Interface

Web Server Gateway Interface，即web服务器网关接口，是Web服务器和Web应用程序或框架之间的一种简单而通用的接口，它是一种协议，一种规范，专门用来解决众多Web服务器和Web应用程序或框架的兼容性问题。有了WSGI，你不用担心你写的Web应用程序只能运行在某一款Web服务器上。

命令中的-w指的是处理请求的进程数，-b是指绑定本机ip，可以省略掉不写，使用的端口是5000，run:app指的是run.py中的flask app。 浏览器中访问http://localhost:6003

1
2
pip install gunicorn
gunicorn -w 2 -b :6003 main:app

Nginx

1
2
apt-get install -y ufw nginx 
ps ax | grep nginx

编辑配置文件/etc/nginx/sites-available/default，修改location /如下

  • Vue编译产生静态文件，访问端口需要修改成后台的公网ip地址

  • 使用nginx替换路径请求，从统一的端口号分发到服务器实际运行的端口上面

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
28
29
30
31
server {
	listen 6003 default_server;
	listen [::]:6003 default_server;

	root /var/www/html;

	# Add index.php to the list if you are using PHP
	index index.html index.htm index.nginx-debian.html;

	server_name localhost;

	location / {
		# First attempt to serve request as file, then
		# as directory, then fall back to displaying a 404.
		try_files $uri $uri/ =404;

		# 前端代理
		root /home/dist/frontend;
		index index.html;
	}

	location /backend {
		# 后端代理
		proxy_pass http://localhost:6005;
		# proxy_redirect off;

		proxy_set_header Host $http_post;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	} 
}

重启nginx服务

1
2
sudo /etc/init.d/nginx restart
sudo /etc/init.d/nginx stop

Supervisor

supervisor是一个用python语言编写的进程管理工具，它可以很方便的监听、启动、停止、重启一个或多个进程。 安装完毕，会生成3个系统命令supervisorctl、supervisord和echo_supervisord_conf

1
2
pip install supervisor
supervisord

/etc/supervisor/conf.d/

https://kalacloud.com/blog/how-to-install-nginx-on-ubuntu-20-04/