1. Overall Flow
1.1 increasing the on-line adaptation of code required
(1) requires a separate static resource static domain name, for example: s.xxx.com, so it is necessary to increase the environmental judgment in the code
(2) Developer pull request submitted request
(3) administrator audit, merged into the master by the the branch
1.2 production environment configuration
(1) Installation NodeJs: As some of the environment-dependent tools
(2) mounted Yarn: dependencies for online installation
(3) Installation Git: configure permissions our code after pulling down the installation from a remote repository
(4) Installation Nginx: as a reverse proxy requests, with it you can make several types of file sharing services and a 80-port
1.3 code release
(1) pull the latest code from the branch Master
(2) by yarn do initialization
(3) online packaged compilation execution environment, it is the project after the package under the dist directory
(4) Copy the dist directory to the target directory
1.4 Nginx configuration and domain name
Nginx by the static files and distributed data interface to a different location
(1) Nginx configuration in vHost: Nginx's handling of domain names, after the server can handle requests sent over the configuration
(2) do regression testing line by specifying hosts fashion (local configuration Host)
(3) Change DNS: external network access through the domain name, do not specify a host
2. adaptation Code
// webpack.config.js 部分关键代码
let WEBPACK_ENV= process.env.WEBPACK_ENV || 'dev';
module.exports = {
output: {
publicPath: WEBPACK_ENV === 'dev' ? '/dist/' : '//s.jianliwu.com/mmall/dist/'
},
package.json
"scripts": {
"dev": "node_modules/.bin/webpack-dev-server",
"dist": "WEBPACK_ENV=online node_modules/.bin/webpack -p",
"dist_win": "set WEBPACK_ENV=online&& node_modules/.bin/webpack -p"
},
3. Server Configuration
3.1 connection to the server
Method 1: ssh [email protected], then enter the password (six short password, the remote connection password)
Method 2: I am Ali cloud servers, no domain name, choose workBench remote connection, a user name (root) password ( this is a long password: login password server) connection
method 3: ssh root @ you buy a public network services ip, then enter the password (6-digit short code)
After the connection appears: [root @ izm5e8hkjaljfk8e4iyyv9fz ~] #
Then you enter: ls -al command to view all the directories (to verify the connection is successful)
3.2 Installation NodeJs
(1) official website to find the version (Linux x64 tar gz) and your corresponding project, Copy Link Location
(2) to the server command line, wget + link address
wget https://nodejs.org/download/release/v12.16.1/node-v12.16.1-linux-x64.tar.gz
Server starts automatically download nodejs
Upon completion of viewing the directory by ls command, found much-v12.16.1-Linux-the Node x64.tar.gz
(3) decompression:
tar -xzvf node-v12.16.1-linux-x64.tar.gz
Ls file and then look to find the unzipped folder: the Node-v12.16.1-Linux-x64
(4) move it to position often put files on the server: / usr / local
mv node-v12.16.1-linux-x64 /usr/local/node
(5) into the examination:
cd /user/local
ls
cd node/
cd bin/
./node -v(会打印出版本, 但是这个命令只能在node目录下执行)
(6) the node and npm command to configure global server environment
ln -s /usr/local/node/bin/node /usr/local/bin/
ln -s /usr/local/node/bin/npm /usr/local/bin/
(Ln -s equivalent of doing a quick access method, the first parameter is the source address, destination address and the second is, / usr / local / bin and there are possible paths to globally accessible)
(7) check again
later cd ... nothing will to the user directory,
cd
node -v
npm -v
If you have implemented, Node installed
3.3 Installation Yarn
Enter the official website, find CentOS version, which has three commands, the second is the installation node, we already have them, direct execution 1 and 3
curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
sudo yum install yarn
an examination
yarn -v
3.4 install git:
yum install git
(1) check
git --version
(2) Configuration ssh (Enter the following command, and then all the way round)
ssh-keygen -t rsa -C [email protected]
(3) which added to gitee "deploy a public key", which is read-only and can not be modified for publication uses
public key just generated view
cat ~/.ssh/id_rsa.pub
(4) clone this project, check whether the configuration ssh
cd / representation switching to the root of
the root directory creation code after the product release package, developer put the development of the relevant code
cd /
mkdir developer
mkdir product
cd developer
mkdir git-repository
cd git-repository
git clone + 项目地址
ls 看看有没有克隆下来
3.5 install Nginx
yum install nginx
检查: nginx -v
Note: node-sass need a c ++ compiler tool, this tool comes with Linux systems, you do not have to install
4. code release:
(1) Initialization and packing
进入git-respository目录, 我克隆的项目目录是: mmall
cd mmall
git pull
git branch
yarn
yarn run dist
ls (检查有没有dist目录)
(2) Copy the dist directory to the target directory (the directory put a special code after the package, create your own)
cd product
mkdir front
cd front
mkdir mmall
cd mmall
cp -R /developer/git-repository/mmall/dist ./
ls (检查dist有没有移动过来)
(3) write a script to automatically release, the shell script written into the directory server developer
cd /developer/
vim mmall-deploy.sh
Press i to enter the input mode, and then pasted the script, and then press Esc, enter: wq to save and exit
(4) execute the script
- Enter / developer / directory, execute:
./mmall-deploy.sh mmall - Error:
Permission denied(insufficient privileges) - View execute permissions:
ls -al - Print:
-rw-r--r-- 1 root root 862 Apr 6 14:52 mmall-deploy.sh(read and write but can not perform) - Modify permissions:
chmod 775 mmall-deploy.sh - Check again permission to print:
-rwxrwxr-x 1 root root 862 Apr 6 14:52 mmall-deploy.sh(become executable) - carried out:
./mmall-deploy.sh mmall
(5) the test again
8. Delete dist directory folder: rm -rf /product/front/mmall/dist/
9. Check whether to delete: cd /product/front/mmalland ls
10 cd -represent jump back to the previous directory, if you are from / developer / skip to, you jump back / developer /
11 after entering the developer release directory again:./mmall-deploy.sh mmall
5. Nginx configuration
(1) into the Nginx directory, if, yum install directory by /etc/nginx/
creating your own virtual host configuration file (2) mkdir vhost
(3) Edit nginx master file: vim nginx.conf
find the bottom, add: include vhost/*.conf;(introduction vhost directory that we created)
(4) to enter vhost, here to do two DNS, one page and interfaces, and the other is static domain name
touch adminv2.jianliwu.com.conf
touch s.jinaliwu.com.conf
- Creating these two documents: (touch to create a file without entering, vim will automatically enter)
- Then go to the editor to write these two files (convenient), completed
- Enter vhost, editing two files created above, with the vim command, simply copy the past Editor-written content
- Create a log file
cd /etc/nginx/
ls
mkdir logs
cd logs/
touch access.log
- Check the configuration of the virtual host is correct
nginx -t, it means not being given the success - Restart Nginx:
nginx -s reload - An error
[error] invalid PID number "" in "/run/nginx.pid" - solve
nginx -c /etc/nginx/nginx.conf (指定一下主文件)
nginx -s reload
6. Access
(1) In the browser input adminv2.jianliwu.com, found it impossible to access, because have not bought DNS domain name, go through the host file to configure it manually to the server ip resolved to the corresponding domain name,
(2) use charles, or by using host file configuration of the machine 2 domain
adminv2.jianliwu.com 182.289.220.0(服务器公网IP)
s.jianliwu.com 182.289.220.0(服务器公网IP)
(3) then adminv2.jianliwu.com, or can not be accessed because the cloud server is not enabled by default port 80, it has to configure, refer to: Cloud services can not be accessed reasons
(4) can be configured 80-port visited after, when you buy a domain name and resolved the record directly to jianliwu.comreplace your domain name
